Cum să utilizați Decoratorul de ieșire în Angular

În Angular, o pagină web poate conține multe componente diferite reutilizabile. Fiecare componentă conține de obicei propria sa logică TypeScript, șablon HTML și stil CSS.

De asemenea, puteți reutiliza componente în interiorul altor componente. În acest caz, puteți utiliza decoratorul de ieșire pentru a trimite informații de la o componentă copil înapoi la componenta părinte.

De asemenea, puteți utiliza decoratorul de ieșire pentru a asculta evenimentele care au loc în componenta copil.

Cum să adăugați decoratorul de ieșire la o componentă copil

Mai întâi, va trebui să creați o nouă aplicație Angular cu o componentă părinte și o componentă copil.

Odată ce aveți o componentă părinte și copil, puteți utiliza decoratorul de ieșire pentru a transfera date și a asculta evenimente între cele două componente.

1. Creaza un nou Aplicare unghiulară. În mod implicit, „app” este numele componentei rădăcină. Această componentă include trei fișiere principale: „app.component.html”, „app.component.css” și „app.component.ts”.
2. Pentru acest exemplu, componenta „aplicație” va acționa ca componentă părinte. Înlocuiți tot conținutul din „app.component.html” cu următorul:

   <divclasă="componenta-mama">
   <h1> Aceasta este componenta părinte h1>
   div>

3. Adăugați ceva stil la componenta aplicației părinte în „app.component.css”:

   .componentă-părinte {
   familie de fonturi: Arial, Helvetica, sans-serif;
   culoare de fundal: coral deschis;
   căptușeală: 20px
   }

4. Utilizați comanda „ng generate component” pentru a creați o nouă componentă Angular numită „componentă de date”. În acest exemplu, „componenta de date” va reprezenta componenta copil.

   ng g c data-component

5. Adăugați conținut la componenta secundară în „data-component.component.html”. Înlocuiți conținutul curent pentru a adăuga un buton nou. Legați butonul la o funcție care va rula când utilizatorul face clic pe el:

   <divclasă="componenta copilului">
   <p> Aceasta este componenta copil p>
   <buton (clic)=„onButtonClick()”>Click pe minebuton>
   div>

6. Adăugați ceva stil la componenta copil în „data-component.component.css”:

   .copil-component {
   familie de fonturi: Arial, Helvetica, sans-serif;
   culoare de fundal: albastru deschis;
   marginea: 20px;
   căptușeală: 20px
   }

7. Adăugați funcția onButtonClick() în fișierul TypeScript pentru componentă, în „data-component.component.ts”:

   onButtonClick() {
   }

8. Încă în fișierul TypeScript, adăugați „Output” și „EventEmitter” la lista de importuri:

   import { Component, Output, EventEmitter, OnInit } din„@angular/core”;

9. În cadrul clasei DataComponentComponent, declarați o variabilă de ieșire pentru componenta numită „buttonWasClicked”. Acesta va fi un EventEmitter. Un EventEmitter este o clasă încorporată care vă permite să informați o altă componentă atunci când are loc un eveniment.

   exportclasă DataComponentComponent unelte OnInit {
   @Ieșire() buttonWasClicked = nou EventEmitter<gol>();
   // ...
   }

10. Utilizați emițătorul de evenimente „buttonWasClicked” din cadrul funcției onButtonClick(). Când utilizatorul face clic pe buton, componenta de date va trimite acest eveniment către componenta aplicației părinte.

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

Cum să ascultați evenimentele din componenta copil din componenta părinte

Pentru a utiliza proprietatea Output a componentei secundare, va trebui să ascultați evenimentul emis de componenta părinte.

1. Utilizați componenta secundară din „app.component.html”. Puteți adăuga ieșirea „buttonWasClicked” ca proprietate atunci când creați eticheta HTML. Legați evenimentul la o nouă funcție.

   <componenta-date-aplicație (butonul a fost făcut clic)=„buttonInChildComponentWasClicked()”>componenta-date-aplicație>

2. În interiorul „app.component.ts”, adăugați noua funcție pentru a gestiona evenimentul de clic pe buton atunci când are loc în componenta copil. Creați un mesaj când utilizatorul face clic pe buton.

   mesaj: şir = ""
   buttonInChildComponentWasClicked() {
   acest.mesaj = „Butonul din componenta copil a fost făcut clic”;
   }

3. Afișați mesajul în „app.component.html”:

   <p>{{mesaj}}p>

4. Introdu comanda „ng serve” într-un terminal pentru a rula aplicația Angular. Deschideți-l într-un browser web la localhost: 4200. Componentele părinte și copil folosesc culori de fundal diferite pentru a face mai ușor deosebirea între ele.
5. Faceți clic pe Click pe mine buton. Componenta copil va trimite evenimentul către componenta părinte, care va afișa mesajul.

Cum să trimiteți date dintr-o componentă secundară la o componentă părinte

De asemenea, puteți trimite date de la componenta fiu la componenta părinte.

1. În „data-component.component.ts”, adăugați o variabilă pentru a stoca o listă de șiruri care conțin unele date.

   listOfPeople: şir[] = ["Joey", 'Ioan', 'James'];

2. Modificați tipul de returnare al emițătorului de eveniment buttonWasClicked. Schimbați-l din void în șir[], pentru a se potrivi cu lista de șiruri pe care ați declarat-o în pasul anterior:

   @Ieșire() buttonWasClicked = nou EventEmitter<şir[]>();

3. Modificați funcția onButtonClick(). Când trimiteți evenimentul către componenta părinte, adăugați datele ca argument în funcția emit():

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

4. În „app.component.html”, modificați eticheta „app-data-component”. Adăugați „$event” în funcția buttonInChildComponentWasClicked(). Acesta conține datele trimise de la componenta copil.

   <componenta-date-aplicație (butonul a fost făcut clic)=„buttonInChildComponentWasClicked($event)”>componenta-date-aplicație>

5. Actualizați funcția din „app.component.ts” pentru a adăuga parametrul pentru date:

   buttonInChildComponentWasClicked (dataFromChild: şir[]) {
   acest.mesaj = „Butonul din componenta copil a fost făcut clic”;
   }

6. Adăugați o nouă variabilă numită „date” pentru a stoca datele care provin din componenta copil:

   mesaj: şir = ""
   date: şir[] = []
   buttonInChildComponentWasClicked (dataFromChild: şir[]) {
   acest.mesaj = „Butonul din componenta copil a fost făcut clic”;
   acest.data = dataFromChild;
   }

7. Afișați datele pe pagina HTML:

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

8. Introdu comanda „ng serve” într-un terminal pentru a rula aplicația Angular. Deschideți-l într-un browser web la localhost: 4200.
9. Faceți clic pe Click pe mine buton. Componenta copil va trimite datele de la componenta copil către componenta părinte.

Trimiterea datelor către alte componente utilizând decoratorul de ieșire

Există și alți decoratori pe care îi puteți folosi în Angular, cum ar fi decoratorul de intrare sau decoratorul de componente. Puteți afla mai multe despre cum puteți folosi alți decoratori în Angular pentru a vă simplifica codul.