Överföra data till förälderkomponenten i Angular

Det är möjligt att överföra data från en barnkomponent till en förälderkomponent. Detta görs genom att avge händelser med hjälp av ett specialobjekt EventEmitter och metoden emit. Barnkomponenten kommer att avge händelser och skicka med vissa data tillsammans med händelsen, medan förälderkomponenten kommer att fånga händelserna och få data från förälderkomponenten.

Låt oss prova i praktiken. För att göra detta behöver vi genomföra en rad steg. Till att börja med importerar vi dekoratören @Output och klassen EventEmitter till vår barnkomponent:

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

Nu skapar vi en egenskap onData i barnklassen, vars värde blir ett nytt objekt EventEmitter, innehållande en sträng:

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

Nu skapar vi en metod send, vars anrop kommer att avge händelsen onData till förälderkomponenten med den givna texten:

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

I barnkomponentens mall skapar vi en knapp, vid klick på vilken metoden send kommer att anropas:

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

I förälderkomponenten skapar vi en metod onData, som automatiskt kommer att anropas när motsvarande händelse avges från barnkomponenten. Data som skickas kommer att hamna i metodens parameter:

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

I förälderkomponentens mall binder vi händelsen till barnkomponentens tagg:

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

Skapa tre knappar i barnkomponenten som avger olika händelser. Fånga de avgivna händelserna i förälderkomponenten.