Overførsel af data til forælderkomponenten i Angular

Det er muligt at overføre data fra en barnkomponent til en forælderkomponent. Dette gøres ved at udsende begivenheder ved hjælp af et specielt objekt EventEmitter og metoden emit. Barnkomponenten vil udsende begivenheder og overføre nogle data sammen med begivenheden, mens forælderkomponenten vil fange begivenhederne og modtage dataene fra barnkomponenten.

Lad os prøve det i praksis. For at gøre dette skal vi gennemføre en række trin. Til at starte med skal vi i vores barnkomponent importere dekoratøren @Output og klassen EventEmitter:

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

Nu skal vi i barnklassen lave en egenskab onData, hvis værdi vil være et nyt objekt EventEmitter, der indeholder en streng:

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

Nu laver vi metoden send, hvis kald vil udsende begivenheden onData til forælderkomponenten med den givne tekst:

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

I barnkomponentens skabelon laver vi en knap, der ved klik vil kalde metoden send:

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

I forælderkomponenten laver vi metoden onData, som automatisk vil blive kaldt, når den tilsvarende begivenhed udsendes fra barnkomponenten. Dataene, der overføres, vil blive sendt til metodens parameter:

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

I forælderkomponentens skabelon binder vi begivenheden til barnkomponentens tag:

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

I barnkomponenten skal du lave tre knapper, der udsender forskellige begivenheder. Fang de udsendte begivenheder i forælderkomponenten.