Ako používať výstupný dekorátor v Angular

V Angular môže webová stránka obsahovať mnoho rôznych opakovane použiteľných komponentov. Každý komponent zvyčajne obsahuje vlastnú logiku TypeScript, šablónu HTML a štýl CSS.

Komponenty môžete znova použiť aj v iných komponentoch. V tomto prípade môžete použiť dekorátor výstupu na odoslanie informácií z podradeného komponentu späť do jeho nadradeného komponentu.

Dekorátor výstupu môžete použiť aj na počúvanie udalostí, ktoré sa vyskytujú v podradenom komponente.

Ako pridať výstupný dekorátor k podradenému komponentu

Najprv budete musieť vytvoriť novú aplikáciu Angular s nadradeným komponentom a podriadeným komponentom.

Keď máte nadradený a podriadený komponent, môžete použiť dekorátor výstupu na prenos údajov a počúvanie udalostí medzi týmito dvoma komponentmi.

1. Vytvorte nový Uhlová aplikácia. V predvolenom nastavení je „aplikácia“ názov koreňového komponentu. Tento komponent obsahuje tri hlavné súbory: „app.component.html“, „app.component.css“ a „app.component.ts“.
2. V tomto príklade bude komponent „app“ fungovať ako nadradený komponent. Nahraďte všetok obsah v "app.component.html" nasledujúcim:

   <divtrieda="rodičovský komponent">
   <h1> Toto je nadradený komponent h1>
   div>

3. Pridajte nejaký štýl do nadradeného komponentu aplikácie v "app.component.css":

   .rodičovský komponent {
   font-family: Arial, Helvetica, sans-serif;
   farba pozadia: svetlý koral;
   vypchávka: 20px
   }

4. Použite na to príkaz "ng generation component". vytvorte nový komponent Angular nazývaný „údajový komponent“. V tomto príklade bude "data-component" predstavovať podradený komponent.

   ng g c dátový komponent

5. Pridajte obsah do podradeného komponentu v "data-component.component.html". Ak chcete pridať nové tlačidlo, nahraďte aktuálny obsah. Pripojte tlačidlo k funkcii, ktorá sa spustí, keď naň používateľ klikne:

   <divtrieda="detská zložka">
   <p> Toto je detská zložka p>
   <tlačidlo (kliknite)="onButtonClick()">Klikni na mňatlačidlo>
   div>

6. Pridajte nejaký štýl do podriadeného komponentu v "data-component.component.css":

   .detská zložka {
   font-family: Arial, Helvetica, sans-serif;
   farba pozadia: svetlo modrá;
   marža: 20px;
   vypchávka: 20px
   }

7. Pridajte funkciu onButtonClick() do súboru TypeScript pre komponent v "data-component.component.ts":

   onButtonClick() {
   }

8. Stále v súbore TypeScript pridajte „Output“ a „EventEmitter“ do zoznamu importov:

   importovať { Component, Output, EventEmitter, OnInit } od'@angular/core';

9. Vo vnútri triedy DataComponentComponent deklarujte výstupnú premennú pre komponent s názvom „buttonWasClicked“. Toto bude EventEmitter. EventEmitter je vstavaná trieda, ktorá vám umožňuje informovať iný komponent, keď nastane udalosť.

   exporttrieda DataComponentComponent náradia OnInit {
   @Výkon() tlačidloBolo kliknuté = Nový EventEmitter<neplatné>();
   // ...
   }

10. Použite emitor udalosti "buttonWasClicked" vo funkcii onButtonClick(). Keď používateľ klikne na tlačidlo, dátový komponent odošle túto udalosť nadradenému komponentu aplikácie.

    onButtonClick() {
    toto.buttonWasClicked.emit();
    }

Ako počúvať udalosti v podradenom komponente z nadradeného komponentu

Ak chcete použiť vlastnosť Output podriadeného komponentu, budete musieť počúvať emitovanú udalosť z nadradeného komponentu.

1. Použite podradený komponent v "app.component.html". Výstup „buttonWasClicked“ môžete pridať ako vlastnosť pri vytváraní značky HTML. Spojte udalosť s novou funkciou.

   <app-data-component (tlačidloBolo kliknuté)="buttonInChildComponentWasClicked()">app-data-component>

2. Do "app.component.ts" pridajte novú funkciu na spracovanie udalosti kliknutia na tlačidlo, keď sa vyskytne v podradenom komponente. Vytvorte správu, keď používateľ klikne na tlačidlo.

   správa: reťazec = ""
   buttonInChildComponentWasClicked() {
   toto.správa = 'Bolo kliknuté na tlačidlo v podradenom komponente';
   }

3. Zobrazte správu v "app.component.html":

   <p>{{správa}}p>

4. Ak chcete spustiť aplikáciu Angular, zadajte do terminálu príkaz „ng serve“. Otvorte ho vo webovom prehliadači na localhost: 4200. Rodičovský a podradený komponent používajú rôzne farby pozadia, aby sa medzi nimi ľahšie rozlišovalo.
5. Klikni na Klikni na mňa tlačidlo. Podradený komponent odošle udalosť nadradenému komponentu, ktorý zobrazí správu.

Ako odosielať údaje z podradeného komponentu do nadradeného komponentu

Môžete tiež odoslať údaje z podriadeného komponentu do nadradeného komponentu.

1. V "data-component.component.ts" pridajte premennú na uloženie zoznamu reťazcov obsahujúcich nejaké údaje.

   zoznam ľudí: reťazec[] = ['Joey', 'John', 'James'];

2. Upravte návratový typ emitora udalosti buttonWasClicked. Zmeňte ho z void na string[], aby sa zhodoval so zoznamom reťazcov, ktoré ste deklarovali v predchádzajúcom kroku:

   @Výkon() tlačidloBolo kliknuté = Nový EventEmitter<reťazec[]>();

3. Upravte funkciu onButtonClick(). Pri odosielaní udalosti do nadradeného komponentu pridajte údaje ako argument do funkcie emit():

   onButtonClick() {
   toto.buttonWasClicked.emit(toto.zoznamĽudí);
   }

4. V "app.component.html" upravte značku "app-data-component". Pridajte „$event“ do funkcie buttonInChildComponentWasClicked(). Obsahuje údaje odoslané z podradeného komponentu.

   <app-data-component (tlačidloBolo kliknuté)="buttonInChildComponentWasClicked($event)">app-data-component>

5. Aktualizujte funkciu v "app.component.ts" a pridajte parameter pre údaje:

   buttonInChildComponentWasClicked (dataFromChild: reťazec[]) {
   toto.správa = 'Bolo kliknuté na tlačidlo v podradenom komponente';
   }

6. Pridajte novú premennú s názvom „data“ na uloženie údajov pochádzajúcich z podradeného komponentu:

   správa: reťazec = ""
   údaje: reťazec[] = []
   buttonInChildComponentWasClicked (dataFromChild: reťazec[]) {
   toto.správa = 'Bolo kliknuté na tlačidlo v podradenom komponente';
   toto.data = dataFromChild;
   }

7. Zobrazte údaje na stránke HTML:

   <p>{{data.join(', ')}}p>

8. Ak chcete spustiť aplikáciu Angular, zadajte do terminálu príkaz „ng serve“. Otvorte ho vo webovom prehliadači na localhost: 4200.
9. Klikni na Klikni na mňa tlačidlo. Podradený komponent odošle údaje z podradeného komponentu nadradenému komponentu.

Odosielanie údajov do iných komponentov pomocou výstupného dekorátora

Existujú aj iné dekorátory, ktoré môžete použiť v Angular, ako napríklad dekorátor Input alebo dekorátor Component. Môžete sa dozvedieť viac o tom, ako môžete použiť iné dekorátory v Angular na zjednodušenie kódu.