Kako uporabljati izhodni dekorater v Angular

V Angularju lahko spletna stran vsebuje veliko različnih komponent za večkratno uporabo. Vsaka komponenta običajno vsebuje lastno logiko TypeScript, predlogo HTML in slog CSS.

Komponente lahko ponovno uporabite tudi znotraj drugih komponent. V tem primeru lahko uporabite izhodni dekorater za pošiljanje informacij iz podrejene komponente nazaj v njeno nadrejeno komponento.

Izhodni dekorater lahko uporabite tudi za poslušanje dogodkov, ki se zgodijo v podrejeni komponenti.

Kako dodati izhodni dekorater podrejeni komponenti

Najprej boste morali ustvariti novo aplikacijo Angular z nadrejeno komponento in podrejeno komponento.

Ko imate nadrejeno in podrejeno komponento, lahko uporabite izhodni dekorater za prenos podatkov in poslušanje dogodkov med komponentama.

1. Ustvari novo Kotna aplikacija. Privzeto je »app« ime korenske komponente. Ta komponenta vključuje tri glavne datoteke: "app.component.html", "app.component.css" in "app.component.ts".
2. V tem primeru bo komponenta »app« delovala kot nadrejena komponenta. Zamenjajte vso vsebino v "app.component.html" z naslednjim:

   <divrazred="starševska komponenta">
   <h1> To je nadrejena komponenta h1>
   div>

3. Dodajte nekaj sloga nadrejeni komponenti aplikacije v »app.component.css«:

   .parent-component {
   družina pisav: Arial, Helvetica, sans-serif;
   Barva ozadja: svetla koral;
   oblazinjenje: 20px
   }

4. Uporabite ukaz "ng generiraj komponento" za ustvarite novo komponento Angular imenovano "podatkovna komponenta". V tem primeru bo "podatkovna komponenta" predstavljala podrejeno komponento.

   ng g c podatkovna komponenta

5. Dodajte vsebino podrejeni komponenti v "data-component.component.html". Zamenjajte trenutno vsebino, da dodate nov gumb. Povežite gumb s funkcijo, ki se bo zagnala, ko uporabnik klikne nanj:

   <divrazred="otroška komponenta">
   <str> To je otroška komponenta str>
   <gumb (kliknite)="onButtonClick()">Kliknite megumb>
   div>

6. Dodajte nekaj sloga podrejeni komponenti v "data-component.component.css":

   .child-component {
   družina pisav: Arial, Helvetica, sans-serif;
   Barva ozadja: svetlo modra;
   marža: 20px;
   oblazinjenje: 20px
   }

7. Dodajte funkcijo onButtonClick() v datoteko TypeScript za komponento v "data-component.component.ts":

   onButtonClick() {
   }

8. Še vedno znotraj datoteke TypeScript dodajte »Output« in »EventEmitter« na seznam uvozov:

   uvoz { Komponenta, Izhod, EventEmitter, OnInit } od'@angular/core';

9. Znotraj razreda DataComponentComponent deklarirajte izhodno spremenljivko za komponento z imenom "buttonWasClicked". To bo EventEmitter. EventEmitter je vgrajeni razred, ki vam omogoča, da obvestite drugo komponento, ko se zgodi dogodek.

   izvozrazred DataComponentComponent pripomočke OnInit {
   @Izhod() buttonWasClicked = novo EventEmitter<praznina>();
   // ...
   }

10. Uporabite oddajnik dogodkov "buttonWasClicked" znotraj funkcije onButtonClick(). Ko uporabnik klikne gumb, podatkovna komponenta pošlje ta dogodek nadrejeni komponenti aplikacije.

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

Kako poslušati dogodke v podrejeni komponenti iz nadrejene komponente

Če želite uporabiti izhodno lastnost podrejene komponente, boste morali poslušati oddani dogodek iz nadrejene komponente.

1. Uporabite podrejeno komponento znotraj »app.component.html«. Izhod "buttonWasClicked" lahko dodate kot lastnost pri ustvarjanju oznake HTML. Povežite dogodek z novo funkcijo.

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

2. Znotraj »app.component.ts« dodajte novo funkcijo za obravnavo dogodka klika gumba, ko se zgodi v podrejeni komponenti. Ustvarite sporočilo, ko uporabnik klikne na gumb.

   sporočilo: vrvica = ""
   buttonInChildComponentWasClicked() {
   to.message = 'Gumb v podrejeni komponenti je bil kliknjen';
   }

3. Prikažite sporočilo v "app.component.html":

   <str>{{sporočilo}}str>

4. Vnesite ukaz "ng serve" v terminal, da zaženete aplikacijo Angular. Odprite ga v spletnem brskalniku na localhost: 4200. Nadrejena in podrejena komponenta uporabljata različne barve ozadja, da jih je lažje razlikovati.
5. Kliknite na Kliknite me gumb. Podrejena komponenta bo poslala dogodek nadrejeni komponenti, ki bo prikazala sporočilo.

Kako poslati podatke iz podrejene komponente v nadrejeno komponento

Prav tako lahko pošljete podatke iz podrejene komponente v nadrejeno komponento.

1. V "data-component.component.ts" dodajte spremenljivko za shranjevanje seznama nizov, ki vsebujejo nekaj podatkov.

   listOfPeople: vrvica[] = ['Joey', 'Janez', 'James'];

2. Spremenite vrsto povratka oddajnika dogodkov buttonWasClicked. Spremenite ga iz void v string[], da se ujema s seznamom nizov, ki ste jih navedli v prejšnjem koraku:

   @Izhod() buttonWasClicked = novo EventEmitter<vrvica[]>();

3. Spremenite funkcijo onButtonClick(). Ko pošiljate dogodek nadrejeni komponenti, dodajte podatke kot argument v funkcijo emit():

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

4. V »app.component.html« spremenite oznako »app-data-component«. Dodajte "$event" v funkcijo buttonInChildComponentWasClicked(). To vsebuje podatke, poslane iz podrejene komponente.

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

5. Posodobite funkcijo v »app.component.ts«, da dodate parameter za podatke:

   buttonInChildComponentWasClicked (dataFromChild: vrvica[]) {
   to.message = 'Gumb v podrejeni komponenti je bil kliknjen';
   }

6. Dodajte novo spremenljivko, imenovano "data", za shranjevanje podatkov, ki prihajajo iz podrejene komponente:

   sporočilo: vrvica = ""
   podatki: vrvica[] = []
   buttonInChildComponentWasClicked (dataFromChild: vrvica[]) {
   to.message = 'Gumb v podrejeni komponenti je bil kliknjen';
   to.data = dataFromChild;
   }

7. Prikaži podatke na strani HTML:

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

8. Vnesite ukaz "ng serve" v terminal, da zaženete aplikacijo Angular. Odprite ga v spletnem brskalniku na localhost: 4200.
9. Kliknite na Kliknite me gumb. Podrejena komponenta bo poslala podatke iz podrejene komponente nadrejeni komponenti.

Pošiljanje podatkov drugim komponentam z izhodnim dekoratorjem

Obstajajo tudi drugi dekoraterji, ki jih lahko uporabite v Angularju, na primer dekorator Input ali Component dekorator. Izvedete lahko več o tem, kako lahko uporabite druge dekoratorje v Angularju za poenostavitev kode.