Jak používat Output Decorator v Angular

V Angular může webová stránka obsahovat mnoho různých opakovaně použitelných komponent. Každá komponenta obvykle obsahuje vlastní logiku TypeScript, HTML šablonu a styl CSS.

Můžete také znovu použít součásti uvnitř jiných součástí. V tomto případě můžete použít dekorátor výstupu k odeslání informací z podřízené komponenty zpět do její nadřazené komponenty.

Dekorátor výstupu můžete také použít k poslechu událostí, které se vyskytují v podřízené komponentě.

Jak přidat výstupní dekorátor k podřízené komponentě

Nejprve budete muset vytvořit novou aplikaci Angular s nadřazenou komponentou a podřízenou komponentou.

Jakmile máte nadřazenou a podřízenou komponentu, můžete použít dekorátor výstupu k přenosu dat a naslouchání událostem mezi těmito dvěma komponentami.

1. Vytvoř nový Úhlová aplikace. Ve výchozím nastavení je "app" název kořenové komponenty. Tato komponenta obsahuje tři hlavní soubory: „app.component.html“, „app.component.css“ a „app.component.ts“.
2. V tomto příkladu bude komponenta „app“ fungovat jako nadřazená komponenta. Nahraďte veškerý obsah v „app.component.html“ následujícím:

   <divtřída="rodičovská složka">
   <h1> Toto je nadřazená komponenta h1>
   div>

3. Přidejte nějaký styl do nadřazené komponenty aplikace v „app.component.css“:

   .rodič-komponenta {
   rodina písem: Arial, Helvetica, sans-serif;
   barva pozadí: světlý korál;
   vycpávka: 20px
   }

4. Použijte k tomu příkaz "ng generation component". vytvořte novou komponentu Angular nazývaná "datová složka". V tomto příkladu bude "data-component" představovat podřízenou komponentu.

   ng g c datová složka

5. Přidejte obsah do podřízené komponenty v "data-component.component.html". Chcete-li přidat nové tlačítko, nahraďte aktuální obsah. Svažte tlačítko s funkcí, která se spustí, když na něj uživatel klikne:

   <divtřída="dětská složka">
   <p> Toto je podřízená složka p>
   <knoflík (klikněte)="onButtonClick()">Klikni na měknoflík>
   div>

6. Přidejte nějaký styl do podřízené komponenty v "data-component.component.css":

   .dětská složka {
   rodina písem: Arial, Helvetica, sans-serif;
   barva pozadí: světle modrá;
   okraj: 20px;
   vycpávka: 20px
   }

7. Přidejte funkci onButtonClick() do souboru TypeScript pro komponentu v "data-component.component.ts":

   onButtonClick() {
   }

8. Stále uvnitř souboru TypeScript přidejte „Output“ a „EventEmitter“ do seznamu importů:

   import { Component, Output, EventEmitter, OnInit } z'@angular/core';

9. Uvnitř třídy DataComponentComponent deklarujte proměnnou Output pro komponentu s názvem "buttonWasClicked". Toto bude EventEmitter. EventEmitter je vestavěná třída, která vám umožňuje informovat jinou komponentu, když dojde k události.

   vývoznítřída DataComponentComponent nářadí OnInit {
   @Výstup() buttonWasClicked = Nový EventEmitter<prázdnota>();
   // ...
   }

10. Použijte emitor události "buttonWasClicked" uvnitř funkce onButtonClick(). Když uživatel klikne na tlačítko, datová komponenta odešle tuto událost do nadřazené komponenty aplikace.

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

Jak poslouchat události v podřízené složce z nadřazené komponenty

Chcete-li použít vlastnost Output podřízené komponenty, budete muset poslouchat emitovanou událost z nadřazené komponenty.

1. Použijte podřízenou komponentu uvnitř "app.component.html". Při vytváření HTML tagu můžete přidat výstup „buttonWasClicked“ jako vlastnost. Svažte událost s novou funkcí.

   <app-data-component (tlačítkoBylo kliknuto)="buttonInChildComponentWasClicked()">app-data-component>

2. Do "app.component.ts" přidejte novou funkci pro zpracování události kliknutí na tlačítko, když k ní dojde v podřízené komponentě. Vytvořte zprávu, když uživatel klikne na tlačítko.

   zpráva: tětiva = ""
   buttonInChildComponentWasClicked() {
   tento.zpráva = 'Bylo kliknuto na tlačítko v podřízené komponentě';
   }

3. Zobrazit zprávu v „app.component.html“:

   <p>{{zpráva}}p>

4. Zadejte příkaz "ng serve" do terminálu a spusťte aplikaci Angular. Otevřete jej ve webovém prohlížeči na localhost: 4200. Nadřazená a podřízená komponenta používají různé barvy pozadí, aby bylo snazší je rozlišit.
5. Klikněte na Klikni na mě knoflík. Podřízená komponenta odešle událost nadřazené komponentě, která zobrazí zprávu.

Jak odesílat data z podřízené komponenty do nadřazené komponenty

Můžete také odeslat data z podřízené komponenty do nadřazené komponenty.

1. V "data-component.component.ts" přidejte proměnnou pro uložení seznamu řetězců obsahujících nějaká data.

   seznam lidí: tětiva[] = ['Joey', 'John', 'James'];

2. Upravte návratový typ emitoru události buttonWasClicked. Změňte jej z void na string[], aby odpovídal seznamu řetězců, které jste deklarovali v předchozím kroku:

   @Výstup() buttonWasClicked = Nový EventEmitter<tětiva[]>();

3. Upravte funkci onButtonClick(). Při odesílání události do nadřazené komponenty přidejte data jako argument do funkce emit():

   onButtonClick() {
   tento.buttonWasClicked.emit(tento.listOfPeople);
   }

4. V „app.component.html“ upravte značku „app-data-component“. Přidejte „$event“ do funkce buttonInChildComponentWasClicked(). Obsahuje data odeslaná z podřízené komponenty.

   <app-data-component (tlačítkoBylo kliknuto)="buttonInChildComponentWasClicked($event)">app-data-component>

5. Aktualizujte funkci v "app.component.ts" a přidejte parametr pro data:

   buttonInChildComponentWasClicked (dataFromChild: tětiva[]) {
   tento.zpráva = 'Bylo kliknuto na tlačítko v podřízené komponentě';
   }

6. Přidejte novou proměnnou nazvanou „data“ pro uložení dat pocházejících z podřízené komponenty:

   zpráva: tětiva = ""
   data: tětiva[] = []
   buttonInChildComponentWasClicked (dataFromChild: tětiva[]) {
   tento.zpráva = 'Bylo kliknuto na tlačítko v podřízené komponentě';
   tento.data = dataFromChild;
   }

7. Zobrazte data na stránce HTML:

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

8. Zadejte příkaz "ng serve" do terminálu a spusťte aplikaci Angular. Otevřete jej ve webovém prohlížeči na localhost: 4200.
9. Klikněte na Klikni na mě knoflík. Podřízená komponenta odešle data z podřízené komponenty nadřazené komponentě.

Odesílání dat do jiných komponent pomocí nástroje Output Decorator

V Angularu můžete použít i další dekorátory, jako je Input decorator nebo Component decorator. Můžete se dozvědět více o tom, jak můžete použít další dekorátory v Angular ke zjednodušení kódu.