Overføring av data til foreldrekomponenten i Angular

Det er mulig å overføre data fra en barnekomponent til en foreldrekomponent. Dette gjøres ved å emittere hendelser ved hjelp av et spesielt objekt EventEmitter og metoden emit. Barnekomponenten vil emittere hendelser og sende med noen data, mens foreldrekomponenten vil fange hendelsene og motta dataene fra barnekomponenten.

La oss prøve dette i praksis. For å gjøre dette må vi gjennomføre en rekke steg. Først må vi i barnekomponenten vår importere dekoratøren @Output og klassen EventEmitter:

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

La oss nå lage en egenskap onData i barneklassen, hvis verdi blir et nytt objekt EventEmitter, som inneholder en streng:

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

La oss nå lage en metode send, hvor kall til denne vil emittere en hendelse onData til foreldrekomponenten med den angitte teksten:

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

I malen for barnekomponenten lager vi en knapp, hvor et klikk på den vil kalle metoden send:

<button (click)="send()">
	send data
</button>

I foreldrekomponenten lager vi en metode onData, som automatisk vil blir kalt når den tilsvarende hendelsen blir emittert fra barnekomponenten. Dataene som sendes vil bli plassert i metodens parameter:

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

I malen for foreldrekomponenten binder vi hendelsen til barnekomponentens tagg:

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

I barnekomponenten lag tre knapper som emitterer forskjellige hendelser. Fång de emitterte hendelsene i foreldrekomponenten.