Hvordan bruke Output Decorator i Angular

I Angular kan en nettside inneholde mange forskjellige gjenbrukbare komponenter. Hver komponent inneholder vanligvis sin egen TypeScript-logikk, HTML-mal og CSS-stil.

Du kan også gjenbruke komponenter inne i andre komponenter. I dette tilfellet kan du bruke utdatadekoratoren til å sende informasjon fra en underordnet komponent tilbake til den overordnede komponenten.

Du kan også bruke Output-dekoratoren til å lytte til hendelser som skjer i den underordnede komponenten.

Hvordan legge til utgangsdekoratoren til en barnekomponent

Først må du lage en ny Angular-app med en overordnet komponent og en underordnet komponent.

Når du har en overordnet og underordnet komponent, kan du bruke Output-dekoratoren til å overføre data og lytte til hendelser mellom de to komponentene.

1. Lage en ny Kantet applikasjon. Som standard er "app" navnet på rotkomponenten. Denne komponenten inkluderer tre hovedfiler: "app.component.html", "app.component.css" og "app.component.ts".
2. For dette eksemplet vil "app"-komponenten fungere som den overordnede komponenten. Erstatt alt innholdet i "app.component.html" med følgende:

   <divklasse="overordnet komponent">
   <h1> Dette er den overordnede komponenten h1>
   div>

3. Legg til litt styling til den overordnede app-komponenten i "app.component.css":

   .overordnet-komponent {
   font-familie: Arial, Helvetica, sans serif;
   bakgrunnsfarge: lyskorall;
   polstring: 20px
   }

4. Bruk kommandoen "ng generer komponent" for å opprette en ny Angular-komponent kalt "data-komponent". I dette eksemplet vil "data-komponent" representere den underordnede komponenten.

   ng g c data-komponent

5. Legg til innhold til den underordnede komponenten i "data-component.component.html". Erstatt gjeldende innhold for å legge til en ny knapp. Bind knappen til en funksjon som vil kjøre når brukeren klikker på den:

   <divklasse="barnekomponent">
   <s> Dette er barnekomponenten s>
   <knapp (klikk)="onButtonClick()">Klikk på megknapp>
   div>

6. Legg til litt styling til den underordnede komponenten i "data-component.component.css":

   .barn-komponent {
   font-familie: Arial, Helvetica, sans serif;
   bakgrunnsfarge: lyse blå;
   margin: 20px;
   polstring: 20px
   }

7. Legg til onButtonClick()-funksjonen i TypeScript-filen for komponenten, i "data-component.component.ts":

   onButtonClick() {
   }

8. Fortsatt inne i TypeScript-filen, legg til "Output" og "EventEmitter" til importlisten:

   import { Component, Output, EventEmitter, OnInit } fra'@angular/core';

9. Inne i DataComponentComponent-klassen erklærer du en utdatavariabel for komponenten kalt "buttonWasClicked". Dette vil være en EventEmitter. En EventEmitter er en innebygd klasse som lar deg informere en annen komponent når en hendelse skjer.

   eksportklasse DataComponentComponent redskaper OnInit {
   @Produksjon() buttonWasClicked = ny EventEmitter<tomrom>();
   // ...
   }

10. Bruk hendelsesmitteren "buttonWasClicked" inne i onButtonClick()-funksjonen. Når brukeren klikker på knappen, vil datakomponenten sende denne hendelsen til den overordnede app-komponenten.

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

Hvordan lytte til hendelser i underordnet komponent fra overordnet komponent

For å bruke den underordnede komponentens Output-egenskap, må du lytte til den utsendte hendelsen fra den overordnede komponenten.

1. Bruk den underordnede komponenten i "app.component.html". Du kan legge til "buttonWasClicked"-utdata som en egenskap når du oppretter HTML-taggen. Bind hendelsen til en ny funksjon.

   <app-data-komponent (Det ble klikket på knappen)="buttonInChildComponentWasClicked()">app-data-komponent>

2. Inne i "app.component.ts", legg til den nye funksjonen for å håndtere knappen-klikk-hendelsen når den oppstår i den underordnede komponenten. Opprett en melding når brukeren klikker på knappen.

   beskjed: streng = ""
   buttonInChildComponentWasClicked() {
   dette.melding = "Knappen i den underordnede komponenten ble klikket";
   }

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

   <s>{{beskjed}}s>

4. Skriv inn kommandoen "ng serve" i en terminal for å kjøre Angular-applikasjonen. Åpne den i en nettleser på localhost: 4200. Foreldre- og barnekomponentene bruker forskjellige bakgrunnsfarger for å gjøre det lettere å skille mellom dem.
5. Klikk på Klikk på meg knapp. Den underordnede komponenten vil sende hendelsen til den overordnede komponenten, som viser meldingen.

Hvordan sende data fra en underordnet komponent til en overordnet komponent

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

1. I "data-component.component.ts", legg til en variabel for å lagre en liste over strenger som inneholder noen data.

   listeOfPeople: streng[] = ['Joey', 'John', 'James'];

2. Endre returtypen til knappenWasClicked-hendelsessenderen. Endre den fra void til string[], for å matche listen over strenger du erklærte i forrige trinn:

   @Produksjon() buttonWasClicked = ny EventEmitter<streng[]>();

3. Endre onButtonClick()-funksjonen. Når du sender hendelsen til den overordnede komponenten, legg til dataene som et argument i emit()-funksjonen:

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

4. I «app.component.html» endrer du «app-data-component»-taggen. Legg til "$event" i buttonInChildComponentWasClicked()-funksjonen. Denne inneholder dataene som er sendt fra den underordnede komponenten.

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

5. Oppdater funksjonen i "app.component.ts" for å legge til parameteren for dataene:

   buttonInChildComponentWasClicked (dataFromChild: streng[]) {
   dette.melding = "Knappen i den underordnede komponenten ble klikket";
   }

6. Legg til en ny variabel kalt "data" for å lagre dataene som kommer fra den underordnede komponenten:

   beskjed: streng = ""
   data: streng[] = []
   buttonInChildComponentWasClicked (dataFromChild: streng[]) {
   dette.melding = "Knappen i den underordnede komponenten ble klikket";
   dette.data = dataFromChild;
   }

7. Vis dataene på HTML-siden:

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

8. Skriv inn kommandoen "ng serve" i en terminal for å kjøre Angular-applikasjonen. Åpne den i en nettleser på localhost: 4200.
9. Klikk på Klikk på meg knapp. Den underordnede komponenten vil sende dataene fra den underordnede komponenten til den overordnede komponenten.

Sende data til andre komponenter ved å bruke Output Decorator

Det er andre dekoratorer du kan bruke i Angular, for eksempel Input-dekoratoren eller Component-dekoratoren. Du kan lære mer om hvordan du kan bruke andre dekoratører i Angular for å forenkle koden din.