Output Decoratorin käyttäminen Angularissa

Kaltaisesi lukijat auttavat tukemaan MUO:ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

Angularissa verkkosivu voi sisältää monia erilaisia uudelleenkäytettäviä komponentteja. Jokainen komponentti sisältää yleensä oman TypeScript-logiikkansa, HTML-mallinsa ja CSS-tyylinsä.

Voit myös käyttää uudelleen komponentteja muiden komponenttien sisällä. Tässä tapauksessa voit käyttää Output-decoratoria lähettääksesi tietoja alakomponentista takaisin sen pääkomponenttiin.

Voit myös käyttää Output-dekoraattoria kuunnellaksesi alikomponentissa tapahtuvia tapahtumia.

omenakello 6 alumiini vs ruostumaton teräs

Tulosteen koristelun lisääminen lapsikomponenttiin

Ensin sinun on luotava uusi Angular-sovellus, jossa on yläkomponentti ja alakomponentti.

Kun sinulla on ylä- ja alakomponentti, voit käyttää Output-dekoraattoria tietojen siirtämiseen ja tapahtumien kuuntelemiseen näiden kahden komponentin välillä.

Luoda uusi Kulmasovellus . Oletuksena 'app' on juurikomponentin nimi. Tämä komponentti sisältää kolme päätiedostoa: 'app.component.html', 'app.component.css' ja 'app.component.ts'.
Tässä esimerkissä 'sovellus'-komponentti toimii pääkomponenttina. Korvaa koko 'app.component.html' -tiedoston sisältö seuraavalla:
```
 <div class="parent-component"> 
  <h1> This is the parent component </h1> 
</div>
```

Lisää tyyliä yläsovelluksen komponenttiin 'app.component.css':ssä:

 .parent-component { 
  font-family: Arial, Helvetica, sans-serif; 
  background-color: lightcoral; 
  padding: 20px 
}

Käytä 'ng generoida komponentti' -komentoa Luo uusi Angular-komponentti kutsutaan 'tietokomponentiksi'. Tässä esimerkissä 'data-komponentti' edustaa alikomponenttia.
```
 ng g c data-component
```
Lisää sisältöä alikomponenttiin tiedostossa 'data-component.component.html'. Korvaa nykyinen sisältö lisätäksesi uuden painikkeen. Sido painike toimintoon, joka käynnistyy, kun käyttäjä napsauttaa sitä:
```
 <div class="child-component"> 
  <p> This is the child component </p> 
  <button (click)="onButtonClick()">Click me</button> 
</div>
```

Lisää tyyliä alikomponenttiin tiedostossa 'data-component.component.css':

 .child-component { 
  font-family: Arial, Helvetica, sans-serif; 
  background-color: lightblue; 
  margin: 20px; 
  padding: 20px 
}

Lisää onButtonClick()-funktio komponentin TypeScript-tiedostoon kohdassa 'data-component.component.ts':
```
 onButtonClick() { 
}
```
Lisää edelleen TypeScript-tiedostoon 'Output' ja 'EventEmitter' tuontiluetteloon:
```
 import { Component, Output, EventEmitter, OnInit } from '@angular/core';
```
Määritä DataComponentComponent-luokassa Output-muuttuja komponentille nimeltä 'buttonWasClicked'. Tästä tulee EventEmitter. EventEmitter on sisäänrakennettu luokka, jonka avulla voit ilmoittaa toiselle komponentille, kun tapahtuma tapahtuu.
```
 export class DataComponentComponent implements OnInit { 
  @Output() buttonWasClicked = new EventEmitter<void>(); 
  // ... 
}
```
Käytä 'buttonWasClicked' -tapahtumalähetintä onButtonClick()-funktion sisällä. Kun käyttäjä napsauttaa painiketta, datakomponentti lähettää tämän tapahtuman pääsovelluskomponenttiin.
```
 onButtonClick() { 
    this.buttonWasClicked.emit(); 
}
```

Lapsikomponentin tapahtumien kuunteleminen yläkomponentista

Jos haluat käyttää alikomponentin Output-ominaisuutta, sinun on kuunneltava pääkomponentin lähettämää tapahtumaa.

Käytä 'app.component.html' -tiedoston alikomponenttia. Voit lisätä 'buttonWasClicked'-tulosteen ominaisuutena luodessasi HTML-tunnistetta. Sido tapahtuma uuteen funktioon.
```
 <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked()"></app-data-component>
```
Lisää 'app.component.ts' -kohtaan uusi toiminto, joka käsittelee painikkeen napsautustapahtumaa, kun se tapahtuu alikomponentissa. Luo viesti, kun käyttäjä napsauttaa painiketta.
```
 message: string = "" 
 
buttonInChildComponentWasClicked() { 
    this.message = 'The button in the child component was clicked'; 
}
```
Näytä viesti tiedostossa 'app.component.html':
```
 <p>{{message}}</p>
```
Suorita Angular-sovellus kirjoittamalla 'ng serve' -komento terminaaliin. Avaa se verkkoselaimella osoitteessa localhost:4200. Pää- ja lapsikomponentit käyttävät erilaisia taustavärejä, jotta ne on helpompi erottaa toisistaan.
Klikkaa Napsauta minua -painiketta. Alikomponentti lähettää tapahtuman pääkomponentille, joka näyttää viestin.

Tietojen lähettäminen lapsikomponentista yläkomponenttiin

Voit myös lähettää tietoja alikomponentista pääkomponenttiin.

Lisää kohtaan 'data-component.component.ts' muuttuja, joka tallentaa tietoja sisältävien merkkijonojen luettelon.
```
 listOfPeople: string[] = ['Joey', 'John', 'James'];
```
Muokkaa buttonWasClicked-tapahtumalähettimen palautustyyppiä. Muuta se voidista merkkijonoksi[], jotta se vastaa edellisessä vaiheessa ilmoittamaasi merkkijonoluetteloa:
```
 @Output() buttonWasClicked = new EventEmitter<string[]>();
```
Muokkaa onButtonClick()-funktiota. Kun lähetät tapahtuman pääkomponenttiin, lisää tiedot argumenttina emit()-funktioon:
```
 onButtonClick() { 
    this.buttonWasClicked.emit(this.listOfPeople); 
}
```
Muokkaa 'app.component.html' -tunnistetta 'app-data-component'. Lisää '$event' buttonInChildComponentWasClicked() -funktioon. Tämä sisältää alikomponentista lähetetyt tiedot.
```
 <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked($event)"></app-data-component>
```

Päivitä 'app.component.ts'-tiedoston toiminto lisätäksesi parametrin tiedoille:

 buttonInChildComponentWasClicked(dataFromChild: string[]) { 
    this.message = 'The button in the child component was clicked'; 
}

Lisää uusi muuttuja nimeltä 'data' tallentaaksesi alikomponentista tulevat tiedot:

 message: string = "" 
data: string[] = [] 
 
buttonInChildComponentWasClicked(dataFromChild: string[]) { 
    this.message = 'The button in the child component was clicked'; 
    this.data = dataFromChild; 
}

Näytä tiedot HTML-sivulla:
```
 <p>{{data.join(', ')}}</p>
```
Suorita Angular-sovellus kirjoittamalla 'ng serve' -komento terminaaliin. Avaa se verkkoselaimella osoitteessa localhost:4200.
Klikkaa Napsauta minua -painiketta. Lapsikomponentti lähettää tiedot alikomponentista pääkomponenttiin.

Tietojen lähettäminen muille komponenteille Output Decoratorin avulla

Angularissa voit käyttää muitakin koristeita, kuten Input-sisustimen tai Komponenttisisustimen. Saat lisätietoja siitä, kuinka voit käyttää muita Angularin sisustajia koodin yksinkertaistamiseksi.