Како користити Оутпут Децоратор у Ангулар-у

У Ангулару, веб страница може да садржи много различитих компоненти за вишекратну употребу. Свака компонента обично садржи сопствену ТипеСцрипт логику, ХТМЛ шаблон и ЦСС стил.

Такође можете поново користити компоненте унутар других компоненти. У овом случају, можете користити Оутпут декоратер да пошаљете информације из подређене компоненте назад у њену родитељску компоненту.

Такође можете користити Оутпут декоратер за слушање догађаја који се дешавају у подређеној компоненти.

Како додати излазни декоратор подређеној компоненти

Прво, мораћете да креирате нову Ангулар апликацију са родитељском компонентом и подређеном компонентом.

Када имате родитељску и подређену компоненту, можете користити Оутпут декоратор за пренос података и слушање догађаја између две компоненте.

1. Створити нова Угаона апликација. Подразумевано, "апп" је име основне компоненте. Ова компонента укључује три главне датотеке: "апп.цомпонент.хтмл", "апп.цомпонент.цсс" и "апп.цомпонент.тс".
2. У овом примеру, компонента „апликација“ ће деловати као родитељска компонента. Замените сав садржај у „апп.цомпонент.хтмл“ следећим:

   <дивкласа="родитељска компонента">
   <х1> Ово је родитељска компонента х1>
   див>

3. Додајте неки стил у надређену компоненту апликације у „апп.цомпонент.цсс“:

   .парент-цомпонент {
   породица фонтова: Ариал, Хелветица, Санс Сериф;
   боја позадине: лигхтцорал;
   паддинг: 20пк
   }

4. Користите команду „нг генерише компоненту“ да креирајте нову Ангулар компоненту под називом „компонента података“. У овом примеру, "компонента података" ће представљати подређену компоненту.

   нг г ц дата-компонента

5. Додајте садржај подређеној компоненти у „дата-цомпонент.цомпонент.хтмл“. Замените тренутни садржај да бисте додали ново дугме. Повежите дугме са функцијом која ће се покренути када корисник кликне на њега:

   <дивкласа="дете-компонента">
   <стр> Ово је дете компонента стр>
   <дугме (кликните)="онБуттонЦлицк()">Кликни медугме>
   див>

6. Додајте неки стил подређеној компоненти у „дата-цомпонент.цомпонент.цсс“:

   .цхилд-цомпонент {
   породица фонтова: Ариал, Хелветица, Санс Сериф;
   боја позадине: светло плава;
   маргина: 20пк;
   паддинг: 20пк
   }

7. Додајте функцију онБуттонЦлицк() у ТипеСцрипт датотеку за компоненту, у „дата-цомпонент.цомпонент.тс“:

   онБуттонЦлицк() {
   }

8. Још увек унутар ТипеСцрипт датотеке, додајте „Оутпут“ и „ЕвентЕмиттер“ на листу увоза:

   увоз { Компонента, Излаз, ЕвентЕмиттер, ОнИнит } из'@ангулар/цоре';

9. Унутар класе ДатаЦомпонентЦомпонент, декларисајте излазну променљиву за компоненту под називом "буттонВасЦлицкед". Ово ће бити ЕвентЕмиттер. ЕвентЕмиттер је уграђена класа која вам омогућава да обавестите другу компоненту када се догађај деси.

   извозкласа ДатаЦомпонентЦомпонент имплементира ОнИнит {
   @Излаз() буттонВасЦлицкед = Нова ЕвентЕмиттер<празнина>();
   // ...
   }

10. Користите емитер догађаја „буттонВасЦлицкед“ унутар функције онБуттонЦлицк(). Када корисник кликне на дугме, компонента података ће послати овај догађај родитељској компоненти апликације.

    онБуттонЦлицк() {
    ово.буттонВасЦлицкед.емит();
    }

Како слушати догађаје у подређеној компоненти из родитељске компоненте

Да бисте користили својство излаза подређене компоненте, мораћете да слушате емитовани догађај из надређене компоненте.

1. Користите подређену компоненту унутар „апп.цомпонент.хтмл“. Можете додати "буттонВасЦлицкед" излаз као својство када креирате ХТМЛ ознаку. Повежите догађај са новом функцијом.

   <апп-дата-цомпонент (буттонВасЦлицкед)="буттонИнЦхилдЦомпонентВасЦлицкед()">апп-дата-цомпонент>

2. Унутар „апп.цомпонент.тс“ додајте нову функцију за руковање догађајем клика на дугме када се догоди у подређеној компоненти. Направите поруку када корисник кликне на дугме.

   порука: низ = ""
   буттонИнЦхилдЦомпонентВасЦлицкед() {
   ово.мессаге = „Кликнуло је дугме у подређеној компоненти“;
   }

3. Прикажите поруку у "апп.цомпонент.хтмл":

   <стр>{{порука}}стр>

4. Унесите команду "нг серве" у терминал да бисте покренули своју Ангулар апликацију. Отворите га у веб претраживачу на лоцалхост: 4200. Надређена и подређена компонента користе различите боје позадине да би се лакше разликовале.
5. Кликните на Кликни ме дугме. Подређена компонента ће послати догађај родитељској компоненти, која ће приказати поруку.

Како послати податке са подређене компоненте на родитељску компоненту

Такође можете слати податке са подређене компоненте на родитељску компоненту.

1. У „дата-цомпонент.цомпонент.тс“ додајте променљиву за чување листе стрингова који садрже неке податке.

   листОфПеопле: низ[] = ['Јоеи', 'Јован', 'Џејмс'];

2. Измените тип враћања емитера догађаја буттонВасЦлицкед. Промените га из воид у стринг[], да би одговарао листи стрингова које сте навели у претходном кораку:

   @Излаз() буттонВасЦлицкед = Нова ЕвентЕмиттер<низ[]>();

3. Измените функцију онБуттонЦлицк(). Када шаљете догађај родитељској компоненти, додајте податке као аргумент у функцију емит():

   онБуттонЦлицк() {
   ово.буттонВасЦлицкед.емит(ово.листОфПеопле);
   }

4. У „апп.цомпонент.хтмл“ измените ознаку „апп-дата-цомпонент“. Додајте „$евент“ у функцију буттонИнЦхилдЦомпонентВасЦлицкед(). Ово садржи податке послате из подређене компоненте.

   <апп-дата-цомпонент (буттонВасЦлицкед)="буттонИнЦхилдЦомпонентВасЦлицкед($евент)">апп-дата-цомпонент>

5. Ажурирајте функцију у "апп.цомпонент.тс" да бисте додали параметар за податке:

   буттонИнЦхилдЦомпонентВасЦлицкед (датаФромЦхилд: низ[]) {
   ово.мессаге = „Кликнуло је дугме у подређеној компоненти“;
   }

6. Додајте нову променљиву под називом „подаци“ за чување података који долазе из подређене компоненте:

   порука: низ = ""
   подаци: низ[] = []
   буттонИнЦхилдЦомпонентВасЦлицкед (датаФромЦхилд: низ[]) {
   ово.мессаге = „Кликнуло је дугме у подређеној компоненти“;
   ово.дата = датаФромЦхилд;
   }

7. Прикажите податке на ХТМЛ страници:

   <стр>{{дата.јоин(', ')}}стр>

8. Унесите команду "нг серве" у терминал да бисте покренули своју Ангулар апликацију. Отворите га у веб претраживачу на лоцалхост: 4200.
9. Кликните на Кликни ме дугме. Подређена компонента ће послати податке из подређене компоненте родитељској компоненти.

Слање података другим компонентама помоћу Оутпут Децоратор

Постоје и други декоратори које можете да користите у Ангулару, као што је декоратор улаза или декоратор компоненте. Можете сазнати више о томе како можете да користите друге декоратере у Ангулару да бисте поједноставили свој код.