Hur man använder Output Decorator i Angular

I Angular kan en webbsida innehålla många olika återanvändbara komponenter. Varje komponent innehåller vanligtvis sin egen TypeScript-logik, HTML-mall och CSS-stil.

Du kan också återanvända komponenter inuti andra komponenter. I det här fallet kan du använda Output-dekoratorn för att skicka information från en underordnad komponent tillbaka till dess överordnade komponent.

Du kan också använda Output dekoratorn för att lyssna på händelser som inträffar i den underordnade komponenten.

Hur man lägger till utgångsdekoratorn till en barnkomponent

Först måste du skapa en ny Angular-app med en överordnad komponent och en underordnad komponent.

När du har en förälder- och barnkomponent kan du använda Output-dekoratorn för att överföra data och lyssna på händelser mellan de två komponenterna.

1. Skapa en ny Vinkelapplikation. Som standard är "app" namnet på rotkomponenten. Den här komponenten innehåller tre huvudfiler: "app.component.html", "app.component.css" och "app.component.ts".
2. I det här exemplet kommer "app"-komponenten att fungera som den överordnade komponenten. Ersätt allt innehåll i "app.component.html" med följande:

   <divklass="förälder-komponent">
   <h1> Detta är den överordnade komponenten h1>
   div>

3. Lägg till lite stil till den överordnade appkomponenten i "app.component.css":

   .parent-component {
   typsnittsfamilj: Arial, Helvetica, sans serif;
   bakgrundsfärg: ljuskorall;
   stoppning: 20px
   }

4. Använd kommandot "ng generera komponent" för att skapa en ny Angular-komponent kallas "data-komponent". I det här exemplet kommer "data-komponent" att representera den underordnade komponenten.

   ng g c datakomponent

5. Lägg till innehåll till den underordnade komponenten i "data-component.component.html". Byt ut det nuvarande innehållet för att lägga till en ny knapp. Bind knappen till en funktion som körs när användaren klickar på den:

   <divklass="barn-komponent">
   <sid> Detta är barnkomponenten sid>
   <knapp (klick)="onButtonClick()">Klicka härknapp>
   div>

6. Lägg till lite stil till den underordnade komponenten i "data-component.component.css":

   .barn-komponent {
   typsnittsfamilj: Arial, Helvetica, sans serif;
   bakgrundsfärg: ljusblå;
   marginal: 20px;
   stoppning: 20px
   }

7. Lägg till funktionen onButtonClick() i TypeScript-filen för komponenten, i "data-component.component.ts":

   onButtonClick() {
   }

8. Fortfarande inne i TypeScript-filen, lägg till "Output" och "EventEmitter" till importlistan:

   importera { Component, Output, EventEmitter, OnInit } från'@angular/core';

9. Inuti klassen DataComponentComponent, deklarera en utdatavariabel för komponenten som heter "buttonWasClicked". Detta kommer att vara en EventEmitter. En EventEmitter är en inbyggd klass som låter dig informera en annan komponent när en händelse inträffar.

   exporteraklass DataComponentComponent redskap OnInit {
   @Produktion() buttonWasClicked = ny EventEmitter<tomhet>();
   // ...
   }

10. Använd händelsesändaren "buttonWasClicked" i onButtonClick()-funktionen. När användaren klickar på knappen skickar datakomponenten denna händelse till den överordnade appkomponenten.

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

Hur man lyssnar på händelser i barnkomponenten från föräldrakomponenten

För att använda den underordnade komponentens Output-egenskap måste du lyssna på den emitterade händelsen från den överordnade komponenten.

1. Använd den underordnade komponenten i "app.component.html". Du kan lägga till "buttonWasClicked"-utgången som en egenskap när du skapar HTML-taggen. Bind händelsen till en ny funktion.

   <app-data-komponent (knappenKlickades)="buttonInChildComponentWasClicked()">app-data-komponent>

2. Inuti "app.component.ts" lägg till den nya funktionen för att hantera knappklickshändelsen när den inträffar i den underordnade komponenten. Skapa ett meddelande när användaren klickar på knappen.

   meddelande: sträng = ""
   buttonInChildComponentWasClicked() {
   detta.meddelande = "Knappen i den underordnade komponenten klickades";
   }

3. Visa meddelandet i "app.component.html":

   <sid>{{meddelande}}sid>

4. Skriv kommandot "ng serve" i en terminal för att köra din Angular-applikation. Öppna den i en webbläsare på localhost: 4200. De överordnade och underordnade komponenterna använder olika bakgrundsfärger för att göra det lättare att skilja mellan dem.
5. Klicka på Klicka här knapp. Den underordnade komponenten skickar händelsen till den överordnade komponenten, som visar meddelandet.

Hur man skickar data från en underordnad komponent till en överordnad komponent

Du kan också skicka data från den underordnade komponenten till den överordnade komponenten.

1. I "data-component.component.ts", lägg till en variabel för att lagra en lista med strängar som innehåller vissa data.

   listOf People: sträng[] = ["Joey", 'John', 'James'];

2. Ändra returtypen för knappenWasClicked-händelssändaren. Ändra den från void till sträng[], för att matcha listan med strängar som du deklarerade i föregående steg:

   @Produktion() buttonWasClicked = ny EventEmitter<sträng[]>();

3. Ändra onButtonClick()-funktionen. När du skickar händelsen till den överordnade komponenten, lägg till data som ett argument i emit()-funktionen:

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

4. I "app.component.html" ändrar du taggen "app-data-component". Lägg till "$event" i funktionen buttonInChildComponentWasClicked(). Detta innehåller data som skickas från den underordnade komponenten.

   <app-data-komponent (knappenKlickades)="buttonInChildComponentWasClicked($event)">app-data-komponent>

5. Uppdatera funktionen i "app.component.ts" för att lägga till parametern för data:

   buttonInChildComponentWasClicked (dataFromChild: sträng[]) {
   detta.meddelande = "Knappen i den underordnade komponenten klickades";
   }

6. Lägg till en ny variabel som heter "data" för att lagra data som kommer från den underordnade komponenten:

   meddelande: sträng = ""
   data: sträng[] = []
   buttonInChildComponentWasClicked (dataFromChild: sträng[]) {
   detta.meddelande = "Knappen i den underordnade komponenten klickades";
   detta.data = dataFromChild;
   }

7. Visa data på HTML-sidan:

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

8. Skriv kommandot "ng serve" i en terminal för att köra din Angular-applikation. Öppna den i en webbläsare på localhost: 4200.
9. Klicka på Klicka här knapp. Den underordnade komponenten skickar data från den underordnade komponenten till den överordnade komponenten.

Skicka data till andra komponenter med hjälp av Output Decorator

Det finns andra dekoratörer du kan använda i Angular, som Input-dekoratören eller Component-dekoratören. Du kan lära dig mer om hur du kan använda andra dekoratörer i Angular för att förenkla din kod.