Tiedonsiirto vanhempakomponenttiin Angularissa

Tietoja voidaan siirtää lapsikomponentista vanhempakomponenttiin. Tämä tehdään lähettämällä tapahtumia erityisellä kohteella EventEmitter ja metodilla emit. Lapsikomponentti lähettää tapahtumia, siirtäen mukanaan tapahtuman yhteydessä tiettyjä tietoja, ja vanhempakomponentti kaappaa tapahtumat, saaden tiedot vanhempakomponentista.

Kokeillaan käytännössä. Tätä varten meidän on suoritettava useita vaiheita. Aluksi lapsikomponenttiimme tuomme dekoraattorin @Output ja luokan EventEmitter:

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

Nyt lapsiluokassa teemme ominaisuuden onData, jonka arvoksi tulee uusi kohde EventEmitter, sisältäen merkkijonon:

export class UserComponent {
	@Output()
	public onData = new EventEmitter<string>();
}

Nyt teemme metodin send, jonka kutsu lähettää tapahtuman onData vanhempakomponenttiin annetulla tekstillä:

export class UserComponent {
	@Output()
	public onData = new EventEmitter<string>();
	
	send() {
		this.onData.emit('xxx');
	}
}

Lapsikomponentin templaatissa teemme painikkeen, jonka klikkauksella kutsutaan metodia send:

<button (click)="send()">
	lähetä data
</button>

Vanhempakomponentissa teemme metodin onData, jota kutsutaan automaattisesti, kun lapsikomponentista lähetetään vastaava tapahtuma. Metodin parametriin tulevat lähetetyt tiedot:

export class AppComponent {
	public onData(data: string) {
		console.log(data);
	}
}

Vanhempakomponentin templaatissa sidomme lapsikomponentin tagiin tapahtuman:

<app-user (onData)="onData($event)"></app-user>

Lapsikomponentissa tee kolme painiketta, jotka lähettävät erilaisia tapahtumia. Kaappaa lähetetyt tapahtumat vanhempakomponentissa.