Kuidas kasutada väljunddekoraatorit nurgas

Angularis võib veebileht sisaldada palju erinevaid korduvkasutatavaid komponente. Iga komponent sisaldab tavaliselt oma TypeScripti loogikat, HTML-i malli ja CSS-stiili.

Samuti saate teiste komponentide sees olevaid komponente uuesti kasutada. Sel juhul saate kasutada väljunddekoraatorit, et saata teavet alamkomponendist tagasi selle emakomponendile.

Saate kasutada ka väljunddekoraatorit alamkomponendis toimuvate sündmuste kuulamiseks.

Kuidas lisada väljundi dekoraatorit lapskomponendile

Esiteks peate looma uue Angulari rakenduse, millel on vanemkomponent ja alamkomponent.

Kui teil on vanem- ja alamkomponent, saate kasutada väljunddekoraatorit andmete edastamiseks ja sündmuste kuulamiseks kahe komponendi vahel.

1. Loo uus Nurga rakendus. Vaikimisi on "app" juurkomponendi nimi. See komponent sisaldab kolme põhifaili: "app.component.html", "app.component.css" ja "app.component.ts".
2. Selle näite puhul toimib komponent "rakendus" põhikomponendina. Asendage kogu "app.component.html" sisu järgmisega:

   <divklass="emakomponent">
   <h1> See on põhikomponent h1>
   div>

3. Lisage failis "app.component.css" põhirakenduse komponendile stiil:

   .parent-komponent {
   font-perekond: Arial, Helvetica, sans-serif;
   taustavärv: helekorall;
   polsterdus: 20px
   }

4. Kasutage selleks käsku "ng genereerida komponent". luua uus Angular komponent nimetatakse "andmekomponendiks". Selles näites tähistab "andmekomponent" alamkomponenti.

   ng g c andmekomponent

5. Lisage alamkomponendile sisu failis "data-component.component.html". Uue nupu lisamiseks asendage praegune sisu. Siduge nupp funktsiooniga, mis käivitub, kui kasutaja sellel klõpsab:

   <divklass="lapskomponent">
   <lk> See on lapse komponent lk>
   <nuppu (klõpsa)="onButtonClick()">Klõpsake mindnuppu>
   div>

6. Lisage faili "data-component.component.css" alamkomponendile veidi stiili:

   .lapskomponent {
   font-perekond: Arial, Helvetica, sans-serif;
   taustavärv: helesinine;
   marginaal: 20px;
   polsterdus: 20px
   }

7. Lisage failis "data-component.component.ts" komponendi TypeScript-faili funktsioon onButtonClick().

   onButtonClick() {
   }

8. Ikka TypeScript-faili sees, lisage impordiloendisse "Output" ja "EventEmitter".

   importida { Component, Output, EventEmitter, OnInit } alates'@angular/core';

9. Klassis DataComponentComponent deklareerige komponendi väljundmuutuja nimega "buttonWasClicked". Sellest saab EventEmitter. EventEmitter on sisseehitatud klass, mis võimaldab teil sündmuse toimumisest teavitada teist komponenti.

   eksportidaklass DataComponentComponent rakendab OnInit {
   @Väljund() nuppu Klõpsati = uus Sündmuse tekitaja<tühine>();
   // ...
   }

10. Kasutage funktsiooni onButtonClick() sees sündmuste emitterit "buttonWasClicked". Kui kasutaja klõpsab nupul, saadab andmekomponent selle sündmuse emarakenduse komponendile.

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

Kuidas kuulata lapse komponendi sündmusi emakomponendist

Alamkomponendi atribuudi Output kasutamiseks peate kuulama emakomponendi väljastatud sündmust.

1. Kasutage failis "app.component.html" olevat alamkomponenti. HTML-i märgendi loomisel saate atribuudina lisada väljundi "buttonWasClicked". Siduge sündmus uue funktsiooniga.

   <app-data-komponent (nuppu Klõpsati)="buttonInChildComponentWasClicked()">app-data-komponent>

2. Lisage jaotisesse "app.component.ts" uus funktsioon, mis käsitleb nupuklõpsu sündmust, kui see toimub alamkomponendis. Looge sõnum, kui kasutaja klõpsab nupul.

   sõnum: string = ""
   buttonInChildComponentWasClicked() {
   see.message = "Klõpsati alamkomponendi nuppu";
   }

3. Kuvage sõnum failis "app.component.html":

   <lk>{{message}}lk>

4. Sisestage Angular-rakenduse käivitamiseks terminali käsk "ng serve". Avage see veebibrauseris aadressil localhost: 4200. Vanem- ja alamkomponendid kasutavad erinevaid taustavärve, et neid oleks lihtsam eristada.
5. Klõpsake nuppu Klõpsake mind nuppu. Alamkomponent saadab sündmuse ülemkomponendile, mis kuvab teate.

Kuidas saata andmeid lapskomponendist emakomponendile

Samuti saate saata andmeid alamkomponendist ülemkomponendile.

1. Lisage jaotisesse "data-component.component.ts" muutuja, et salvestada teatud andmeid sisaldavate stringide loend.

   Inimeste nimekiri: string[] = ["Joey", "John", "James"];

2. Muutke nupu WasClicked sündmuse emitteri tagastustüüpi. Muutke see tühjast stringiks [], et see vastaks eelmises etapis deklareeritud stringide loendile:

   @Väljund() nuppu Klõpsati = uus Sündmuse tekitaja<string[]>();

3. Muutke funktsiooni onButtonClick(). Kui saadate sündmuse emakomponendile, lisage andmed argumendina funktsiooni emit():

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

4. Muutke jaotises „app.component.html” märgendit „app-data-component”. Lisage "$event" funktsiooni buttonInChildComponentWasClicked() alla. See sisaldab alamkomponendist saadetud andmeid.

   <app-data-komponent (nuppu Klõpsati)="buttonInChildComponentWasClicked($event)">app-data-komponent>

5. Andmete parameetri lisamiseks värskendage funktsiooni "app.component.ts".

   nuppuInChildComponentClicked (dataFromChild: string[]) {
   see.message = "Klõpsati alamkomponendi nuppu";
   }

6. Lisage uus muutuja nimega "data", et salvestada alamkomponendist pärinevad andmed:

   sõnum: string = ""
   andmed: string[] = []
   nuppuInChildComponentClicked (dataFromChild: string[]) {
   see.message = "Klõpsati alamkomponendi nuppu";
   see.data = dataFromChild;
   }

7. Andmete kuvamine HTML-lehel:

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

8. Sisestage Angular-rakenduse käivitamiseks terminali käsk "ng serve". Avage see veebibrauseris aadressil localhost: 4200.
9. Klõpsake nuppu Klõpsake mind nuppu. Alamkomponent saadab andmed alamkomponendist ülemkomponendile.

Andmete saatmine teistele komponentidele väljunddekoraatori abil

Angularis saate kasutada ka teisi dekoraatoreid, näiteks sisenddekoraator või komponentdekoraator. Lisateavet selle kohta, kuidas saate koodi lihtsustamiseks kasutada Angularis teisi dekoraatoreid.