Kako koristiti izlazni dekorater u Angularu

U Angularu, web stranica može sadržavati mnogo različitih komponenti koje se mogu ponovno koristiti. Svaka komponenta obično sadrži vlastitu TypeScript logiku, HTML predložak i CSS stil.

Također možete ponovno koristiti komponente unutar drugih komponenti. U ovom slučaju možete upotrijebiti dekorator izlaza za slanje informacija iz podređene komponente natrag u nadređenu komponentu.

Također možete koristiti dekorator izlaza za slušanje događaja koji se događaju u podređenoj komponenti.

Kako dodati izlazni dekorater podređenoj komponenti

Prvo ćete morati izraditi novu Angular aplikaciju s nadređenom komponentom i podređenom komponentom.

Nakon što imate nadređenu i podređenu komponentu, možete koristiti izlazni dekorater za prijenos podataka i slušanje događaja između dviju komponenti.

1. Stvorite novi Kutna primjena. Prema zadanim postavkama, "app" je naziv korijenske komponente. Ova komponenta uključuje tri glavne datoteke: "app.component.html", "app.component.css" i "app.component.ts".
2. U ovom primjeru, komponenta "app" djelovat će kao nadređena komponenta. Zamijenite sav sadržaj u "app.component.html" sa sljedećim:

   <divrazreda="roditeljska komponenta">
   <h1> Ovo je nadređena komponenta h1>
   div>

3. Dodajte malo stila nadređenoj komponenti aplikacije u "app.component.css":

   .roditeljska komponenta {
   obitelj-fontova: Arial, Helvetica, sans-serif;
   boja pozadine: svijetlokoralj;
   podstava: 20px
   }

4. Koristite naredbu "ng generiraj komponentu" za stvoriti novu Angular komponentu pod nazivom "komponenta podataka". U ovom primjeru, "komponenta podataka" predstavljat će komponentu dijete.

   ng g c podatkovna komponenta

5. Dodajte sadržaj podređenoj komponenti u "data-component.component.html". Zamijenite trenutni sadržaj da biste dodali novi gumb. Povežite gumb s funkcijom koja će se pokrenuti kada korisnik klikne na njega:

   <divrazreda="dijete-komponenta">
   <str> Ovo je komponenta djeteta str>
   <dugme (klik)="onButtonClick()">Klikni medugme>
   div>

6. Dodajte malo stila podređenoj komponenti u "data-component.component.css":

   .dijete-komponenta {
   obitelj-fontova: Arial, Helvetica, sans-serif;
   boja pozadine: svijetlo plava;
   margina: 20px;
   podstava: 20px
   }

7. Dodajte funkciju onButtonClick() u datoteku TypeScript za komponentu u "data-component.component.ts":

   onButtonClick() {
   }

8. Još uvijek unutar TypeScript datoteke, dodajte "Output" i "EventEmitter" na popis uvoza:

   uvoz {Component, Output, EventEmitter, OnInit} iz'@angular/core';

9. Unutar klase DataComponentComponent, deklarirajte izlaznu varijablu za komponentu pod nazivom "buttonWasClicked". Ovo će biti EventEmitter. EventEmitter je ugrađena klasa koja vam omogućuje da obavijestite drugu komponentu kada se događaj dogodi.

   izvozrazreda DataComponentComponent oruđa OnInit {
   @Izlaz() buttonWasClicked = novi Odašiljač događaja<poništiti>();
   // ...
   }

10. Upotrijebite emiter događaja "buttonWasClicked" unutar funkcije onButtonClick(). Kada korisnik klikne na gumb, podatkovna komponenta će poslati ovaj događaj nadređenoj komponenti aplikacije.

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

Kako slušati događaje u podređenoj komponenti iz nadređene komponente

Da biste koristili svojstvo Output podređene komponente, morat ćete poslušati emitirani događaj od nadređene komponente.

1. Koristite podređenu komponentu unutar "app.component.html". Možete dodati izlaz "buttonWasClicked" kao svojstvo prilikom izrade HTML oznake. Povežite događaj s novom funkcijom.

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

2. Unutar "app.component.ts" dodajte novu funkciju za rukovanje događajem klika na gumb kada se dogodi u podređenoj komponenti. Napravite poruku kada korisnik klikne na gumb.

   poruka: niz = ""
   buttonInChildComponentWasClicked() {
   ovaj.poruka = 'Kliknuto je na gumb u podređenoj komponenti';
   }

3. Prikaži poruku u "app.component.html":

   <str>{{poruka}}str>

4. Upišite naredbu "ng serve" u terminal za pokretanje vaše Angular aplikacije. Otvorite ga u web pregledniku na localhost: 4200. Roditeljska i podređena komponenta koriste različite boje pozadine kako bi ih lakše razlikovali.
5. Klikni na Klikni me dugme. Podređena komponenta će poslati događaj nadređenoj komponenti, koja će prikazati poruku.

Kako poslati podatke iz podređene komponente u nadređenu komponentu

Također možete poslati podatke iz podređene komponente u nadređenu komponentu.

1. U "data-component.component.ts" dodajte varijablu za pohranu popisa nizova koji sadrže neke podatke.

   listaOfPeople: niz[] = ['Joey', 'Ivan', 'James'];

2. Izmijenite vrstu povrata emitera događaja buttonWasClicked. Promijenite ga iz void u string[], da odgovara popisu nizova koje ste deklarirali u prethodnom koraku:

   @Izlaz() buttonWasClicked = novi Odašiljač događaja<niz[]>();

3. Izmijenite funkciju onButtonClick(). Kada šaljete događaj nadređenoj komponenti, dodajte podatke kao argument u funkciju emit():

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

4. U "app.component.html" izmijenite oznaku "app-data-component". Dodajte "$event" u funkciju buttonInChildComponentWasClicked(). Ovo sadrži podatke poslane iz podređene komponente.

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

5. Ažurirajte funkciju u "app.component.ts" da biste dodali parametar za podatke:

   gumbInChildComponentWasClicked (dataFromChild: niz[]) {
   ovaj.poruka = 'Kliknuto je na gumb u podređenoj komponenti';
   }

6. Dodajte novu varijablu pod nazivom "podaci" za pohranu podataka koji dolaze iz podređene komponente:

   poruka: niz = ""
   podaci: niz[] = []
   gumbInChildComponentWasClicked (dataFromChild: niz[]) {
   ovaj.poruka = 'Kliknuto je na gumb u podređenoj komponenti';
   ovaj.podaci = podaciOdDjeteta;
   }

7. Prikaži podatke na HTML stranici:

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

8. Upišite naredbu "ng serve" u terminal za pokretanje vaše Angular aplikacije. Otvorite ga u web pregledniku na localhost: 4200.
9. Klikni na Klikni me dugme. Podređena komponenta će poslati podatke iz podređene komponente nadređenoj komponenti.

Slanje podataka drugim komponentama pomoću izlaznog dekoratora

Postoje i drugi dekoratori koje možete koristiti u Angularu, kao što je Input dekorator ili Component dekorator. Možete saznati više o tome kako možete koristiti druge dekoratore u Angularu da biste pojednostavili svoj kod.