Adatátvitel a szülő komponensbe az Angularban

Lehetőség van adatokat átvinni a gyermek komponensből a szülő komponensbe. Ezt események kibocsátásával érjük el, a speciális EventEmitter objektum és a emit metódus segítségével. A gyermek komponens eseményeket bocsát ki, együtt néhány adattal, míg a szülő komponens elkapja ezeket az eseményeket, és megkapja az adatokat a szülő komponensből.

Próbáljuk ki a gyakorlatban. Ehhez számos lépést kell megtennünk. Először is, a gyermek komponensünkbe importáljuk a @Output dekorátort és a EventEmitter osztályt:

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

Most a gyermek osztályban készítsünk egy onData tulajdonságot, melynek értéke egy új EventEmitter objektum lesz, ami egy string típust tartalmaz:

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

Most készítsünk egy send metódust, amelynek meghívása egy onData eseményt bocsát ki a szülő komponensbe a megadott szöveggel:

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

A gyermek komponens template-jében készítsünk egy gombot, amelyre kattintva a send metódus hívódik meg:

<button (click)="send()">
	adat küldése
</button>

A szülő komponensben készítsünk egy onData metódust, amely automatikusan meg fog hívódni, amikor a gyermek komponensből ki lesz bocsátva a megfelelő esemény. A metódus paraméterébe fognak kerülni az átadott adatok:

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

A szülő komponens template-jében kötssük a gyermek komponens tagjához az eseményt:

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

A gyermek komponensben készíts három gombot, amelyek különböző eseményeket bocsátanak ki. Kapd el a kibocsátott eseményeket a szülő komponensben.