Как да използвате изходния декоратор в Angular

В Angular една уеб страница може да съдържа много различни компоненти за многократна употреба. Всеки компонент обикновено съдържа своя собствена TypeScript логика, HTML шаблон и CSS стил.

Можете също да използвате повторно компоненти в други компоненти. В този случай можете да използвате декоратора на изхода, за да изпратите информация от дъщерен компонент обратно към неговия родителски компонент.

Можете също да използвате декоратора на изхода, за да слушате събития, които се случват в дъщерния компонент.

Как да добавите изходния декоратор към дъщерен компонент

Първо, ще трябва да създадете ново приложение Angular с родителски компонент и дъщерен компонент.

След като имате родителски и дъщерен компонент, можете да използвате декоратора на изхода, за да прехвърляте данни и да слушате събития между двата компонента.

1. Създайте нов Ъглово приложение. По подразбиране "приложение" е името на главния компонент. Този компонент включва три основни файла: "app.component.html", "app.component.css" и "app.component.ts".
2. За този пример компонентът "приложение" ще действа като родителски компонент. Заменете цялото съдържание в "app.component.html" със следното:

   <дивклас="родителски компонент">
   <h1> Това е родителският компонент h1>
   див>

3. Добавете малко стил към родителския компонент на приложението в "app.component.css":

   .parent-component {
   шрифтово семейство: Arial, Хелветика, безсерифен;
   Цвят на фона: светъл корал;
   подплата: 20px
   }

4. Използвайте командата "ng генерира компонент", за да създайте нов Angular компонент наречен "компонент на данни". В този пример "component-data" ще представлява дъщерния компонент.

   ng g c компонент на данни

5. Добавете съдържание към дъщерния компонент в „data-component.component.html“. Заменете текущото съдържание, за да добавите нов бутон. Свържете бутона с функция, която ще се изпълнява, когато потребителят щракне върху него:

   <дивклас="детски компонент">
   <стр> Това е дъщерният компонент стр>
   <бутон (щракнете)="onButtonClick()">Щракни върху менбутон>
   див>

6. Добавете малко стил към дъщерния компонент в "data-component.component.css":

   .child-component {
   шрифтово семейство: Arial, Хелветика, безсерифен;
   Цвят на фона: светло синьо;
   марж: 20px;
   подплата: 20px
   }

7. Добавете функцията onButtonClick() към TypeScript файла за компонента в "data-component.component.ts":

   onButtonClick() {
   }

8. Все още във файла TypeScript, добавете „Output“ и „EventEmitter“ към списъка за импортиране:

   импортиране {Component, Output, EventEmitter, OnInit} от'@angular/core';

9. Вътре в класа DataComponentComponent декларирайте изходна променлива за компонента, наречена „buttonWasClicked“. Това ще бъде EventEmitter. EventEmitter е вграден клас, който ви позволява да информирате друг компонент, когато се случи събитие.

   износклас DataComponentComponent инструменти OnInit {
   @Изход() buttonWasClicked = нов EventEmitter<невалиден>();
   // ...
   }

10. Използвайте източника на събитие "buttonWasClicked" във функцията onButtonClick(). Когато потребителят щракне върху бутона, компонентът за данни ще изпрати това събитие до родителския компонент на приложението.

    onButtonClick() {
    това.buttonWasClicked.emit();
    }

Как да слушате събития в дъщерния компонент от родителския компонент

За да използвате свойството Output на дъщерния компонент, ще трябва да слушате излъченото събитие от родителския компонент.

1. Използвайте дъщерния компонент вътре в „app.component.html“. Можете да добавите изхода „buttonWasClicked“ като свойство, когато създавате HTML тага. Свържете събитието с нова функция.

   <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked()">app-data-component>

2. Вътре в „app.component.ts“ добавете новата функция за обработка на събитието за щракване на бутон, когато се случи в дъщерния компонент. Създайте съобщение, когато потребителят щракне върху бутона.

   съобщение: низ = ""
   buttonInChildComponentWasClicked() {
   това.съобщение = „Бутонът в дъщерния компонент беше щракнат“;
   }

3. Показване на съобщението в "app.component.html":

   <стр>{{съобщение}}стр>

4. Въведете командата "ng serve" в терминал, за да стартирате вашето Angular приложение. Отворете го в уеб браузър на localhost: 4200. Родителският и дъщерният компонент използват различни цветове на фона, за да улеснят разграничаването им.
5. Кликнете върху Щракни върху мен бутон. Дъщерният компонент ще изпрати събитието на родителския компонент, който ще покаже съобщението.

Как да изпратите данни от дъщерен компонент към родителски компонент

Можете също да изпращате данни от дъщерния компонент към родителския компонент.

1. В "data-component.component.ts" добавете променлива за съхраняване на списък от низове, съдържащи някои данни.

   listOfPeople: низ[] = ["Джоуи", 'Джон', "Джеймс"];

2. Променете типа на връщане на източника на събитие buttonWasClicked. Променете го от void на string[], за да съответства на списъка с низове, които сте декларирали в предишната стъпка:

   @Изход() buttonWasClicked = нов EventEmitter<низ[]>();

3. Променете функцията onButtonClick(). Когато изпращате събитието към родителския компонент, добавете данните като аргумент във функцията emit():

   onButtonClick() {
   това.buttonWasClicked.emit(това.listOfPeople);
   }

4. В „app.component.html“ променете маркера „app-data-component“. Добавете "$event" във функцията buttonInChildComponentWasClicked(). Това съдържа данните, изпратени от дъщерния компонент.

   <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked($event)">app-data-component>

5. Актуализирайте функцията в "app.component.ts", за да добавите параметъра за данните:

   buttonInChildComponentWasClicked (dataFromChild: низ[]) {
   това.съобщение = „Бутонът в дъщерния компонент беше щракнат“;
   }

6. Добавете нова променлива, наречена "данни", за да съхранявате данните, идващи от дъщерния компонент:

   съобщение: низ = ""
   данни: низ[] = []
   buttonInChildComponentWasClicked (dataFromChild: низ[]) {
   това.съобщение = „Бутонът в дъщерния компонент беше щракнат“;
   това.data = dataFromChild;
   }

7. Показване на данните на HTML страницата:

   <стр>{{data.join(', ')}}стр>

8. Въведете командата "ng serve" в терминал, за да стартирате вашето Angular приложение. Отворете го в уеб браузър на localhost: 4200.
9. Кликнете върху Щракни върху мен бутон. Дъщерният компонент ще изпрати данните от дъщерния компонент към родителския компонент.

Изпращане на данни към други компоненти с помощта на изходния декоратор

Има други декоратори, които можете да използвате в Angular, като декоратора на входа или декоратора на компонентите. Можете да научите повече за това как можете да използвате други декоратори в Angular, за да опростите кода си.