Sådan bruges Output Decorator i Angular

I Angular kan en webside indeholde mange forskellige genbrugelige komponenter. Hver komponent indeholder normalt sin egen TypeScript-logik, HTML-skabelon og CSS-styling.

Du kan også genbruge komponenter inde i andre komponenter. I dette tilfælde kan du bruge Output-dekoratoren til at sende oplysninger fra en underordnet komponent tilbage til dens overordnede komponent.

Du kan også bruge Output-dekoratoren til at lytte til begivenheder, der forekommer i den underordnede komponent.

Sådan tilføjes outputdekoratoren til en børnekomponent

Først skal du oprette en ny Angular-app med en overordnet komponent og en underordnet komponent.

Når du har en forælder- og underordnet komponent, kan du bruge Output-dekoratoren til at overføre data og lytte til begivenheder mellem de to komponenter.

1. Opret en ny Kantet applikation. Som standard er "app" navnet på rodkomponenten. Denne komponent indeholder tre hovedfiler: "app.component.html", "app.component.css" og "app.component.ts".
2. I dette eksempel vil "app"-komponenten fungere som den overordnede komponent. Erstat alt indholdet i "app.component.html" med følgende:

   <divklasse="forælder-komponent">
   <h1> Dette er den overordnede komponent h1>
   div>

3. Tilføj lidt styling til den overordnede app-komponent i "app.component.css":

   .forælder-komponent {
   skrifttype-familie: Arial, Helvetica, sans serif;
   baggrundsfarve: lyskoral;
   polstring: 20px
   }

4. Brug kommandoen "ng generer komponent" for at oprette en ny Angular-komponent kaldet "data-komponent". I dette eksempel vil "data-komponent" repræsentere den underordnede komponent.

   ng g c data-komponent

5. Tilføj indhold til den underordnede komponent i "data-component.component.html". Erstat det aktuelle indhold for at tilføje en ny knap. Bind knappen til en funktion, der kører, når brugeren klikker på den:

   <divklasse="barnekomponent">
   <s> Dette er underordnet komponent s>
   <knap (klik)="onButtonClick()">Klik på migknap>
   div>

6. Tilføj lidt styling til den underordnede komponent i "data-component.component.css":

   .barn-komponent {
   skrifttype-familie: Arial, Helvetica, sans serif;
   baggrundsfarve: lyseblå;
   margen: 20px;
   polstring: 20px
   }

7. Tilføj funktionen onButtonClick() til TypeScript-filen for komponenten i "data-component.component.ts":

   onButtonClick() {
   }

8. Stadig inde i TypeScript-filen skal du tilføje "Output" og "EventEmitter" til importlisten:

   importere { Component, Output, EventEmitter, OnInit } fra'@angular/kerne';

9. Inde i DataComponentComponent-klassen skal du erklære en outputvariabel for komponenten kaldet "buttonWasClicked". Dette vil være en EventEmitter. En EventEmitter er en indbygget klasse, der giver dig mulighed for at informere en anden komponent, når en begivenhed sker.

   eksportklasse DataComponentComponent redskaber OnInit {
   @Produktion() knappenWasClicked = ny EventEmitter<ugyldig>();
   // ...
   }

10. Brug "buttonWasClicked"-hændelsesmitteren inde i onButtonClick()-funktionen. Når brugeren klikker på knappen, sender datakomponenten denne hændelse til den overordnede app-komponent.

    onButtonClick() {
    det her.buttonWasClicked.emit();
    }

Sådan lytter du til begivenheder i børnekomponenten fra forældrekomponenten

For at bruge den underordnede komponents Output-egenskab skal du lytte til den udsendte hændelse fra den overordnede komponent.

1. Brug den underordnede komponent i "app.component.html". Du kan tilføje "buttonWasClicked"-outputtet som en egenskab, når du opretter HTML-tagget. Bind begivenheden til en ny funktion.

   <app-data-komponent (Der blev klikket på knappen)="buttonInChildComponentWasClicked()">app-data-komponent>

2. Tilføj den nye funktion inde i "app.component.ts" til at håndtere knapklik-hændelsen, når den opstår i den underordnede komponent. Opret en besked, når brugeren klikker på knappen.

   besked: snor = ""
   buttonInChildComponentWasClicked() {
   det her.besked = "Der blev klikket på knappen i den underordnede komponent";
   }

3. Vis meddelelsen i "app.component.html":

   <s>{{besked}}s>

4. Indtast kommandoen "ng serve" i en terminal for at køre din Angular-applikation. Åbn den i en webbrowser på localhost: 4200. Forældre- og underordnede komponenter bruger forskellige baggrundsfarver for at gøre det nemmere at skelne mellem dem.
5. Klik på Klik på mig knap. Den underordnede komponent sender hændelsen til den overordnede komponent, som viser meddelelsen.

Sådan sender du data fra en underordnet komponent til en overordnet komponent

Du kan også sende data fra den underordnede komponent til den overordnede komponent.

1. Tilføj en variabel i "data-component.component.ts" for at gemme en liste over strenge, der indeholder nogle data.

   listeOf People: snor[] = ['Joey', 'John', 'James'];

2. Rediger returtypen for buttonWasClicked-hændelsesmitteren. Skift det fra void til streng[], for at matche listen over strenge, du erklærede i det forrige trin:

   @Produktion() knappenWasClicked = ny EventEmitter<snor[]>();

3. Rediger onButtonClick()-funktionen. Når du sender hændelsen til den overordnede komponent, skal du tilføje dataene som et argument i emit()-funktionen:

   onButtonClick() {
   det her.buttonWasClicked.emit(det her.listOfPeople);
   }

4. Rediger tagget "app-data-component" i "app.component.html". Tilføj "$event" til buttonInChildComponentWasClicked()-funktionen. Dette indeholder de data, der sendes fra den underordnede komponent.

   <app-data-komponent (Der blev klikket på knappen)="buttonInChildComponentWasClicked($event)">app-data-komponent>

5. Opdater funktionen i "app.component.ts" for at tilføje parameteren for dataene:

   buttonInChildComponentWasClicked (dataFromChild: snor[]) {
   det her.besked = "Der blev klikket på knappen i den underordnede komponent";
   }

6. Tilføj en ny variabel kaldet "data" for at gemme de data, der kommer fra den underordnede komponent:

   besked: snor = ""
   data: snor[] = []
   buttonInChildComponentWasClicked (dataFromChild: snor[]) {
   det her.besked = "Der blev klikket på knappen i den underordnede komponent";
   det her.data = dataFromChild;
   }

7. Vis dataene på HTML-siden:

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

8. Indtast kommandoen "ng serve" i en terminal for at køre din Angular-applikation. Åbn den i en webbrowser på localhost: 4200.
9. Klik på Klik på mig knap. Den underordnede komponent sender dataene fra den underordnede komponent til den overordnede komponent.

Afsendelse af data til andre komponenter ved hjælp af outputdekoratoren

Der er andre dekoratorer, du kan bruge i Angular, såsom Input-dekoratoren eller Component-dekoratoren. Du kan lære mere om, hvordan du kan bruge andre dekoratører i Angular til at forenkle din kode.