Angular'da Ebeveyn Bileşene Veri Aktarımı

Alt bileşenden ebeveyn bileşene veri aktarılabilir. Bu, özel bir nesne EventEmitter ve emit metodu kullanılarak olaylar yayınlama yoluyla yapılır. Alt bileşen, olayla birlikte bazı verileri ileterek olaylar yayınlayacak, ebeveyn bileşen ise bu olayları yakalayarak ebeveyn bileşenden veri alacaktır.

Pratikte deneyelim. Bunun için bir dizi adımı tamamlamamız gerekiyor. Başlangıç olarak, alt bileşenimize @Output dekoratörünü ve EventEmitter sınıfını içe aktaralım:

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

Şimdi alt sınıfta, değeri bir dize içeren yeni bir EventEmitter nesnesi olan onData özelliğini oluşturalım:

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

Şimdi, çağrıldığında onData olayını ebeveyn bileşene belirli bir metinle yayacak olan send metodunu oluşturalım:

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

Alt bileşenin şablonunda, tıklandığında send metodunu çağıracak bir düğme oluşturalım:

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

Ebeveyn bileşende, alt bileşenden ilgili olay yayınlandığında otomatik olarak çağrılacak olan onData metodunu oluşturalım. Metodun parametresine iletilen veriler gelecektir:

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

Ebeveyn bileşenin şablonunda, alt bileşen etiketine olayı bağlayalım:

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

Alt bileşende, farklı olaylar yayan üç düğme yapın. Yayılan olayları ebeveyn bileşende yakalayın.