Məlumatların valideyn komponentə ötürülməsi Angular-da

Uşaq komponentdən valideyn komponentə məlumatlar ötürülə bilər. Bu, xüsusi EventEmitter obyekti və emit metodu vasitəsilə hadisələr yaymaqla həyata keçirilir. Uşaq komponent bəzi məlumatları hadisə ilə birlikdə ötürərək hadisələr yayacaq, valideyn komponent isə valideyn komponentdən məlumatları alaraq hadisələri tutacaq.

Gəlin praktiki olaraq yoxlayaq. Bunun üçün bir sıra addımları yerinə yetirməliyik. Əvvəlcə uşaq komponentimizə @Output dekoratorunu və EventEmitter sinfini import edək:

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

İndi uşaq sinifdə onData xassəsi yaradaq, onun dəyəri sətir ehtiva edən yeni EventEmitter obyekti olacaq:

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

İndi send metodu yaradaq, onun çağırışı onData hadisəsini valideyn komponentə verilmiş mətnlə yayacaq:

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

Uşaq komponentin templatində send metodunu çağıran bir düymə yaradaq:

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

Valideyn komponentdə onData metodunu yaradaq, bu metod avtomatik olarq uşaq komponentdən müvafiq hadisə yayıldıqda çağırılacaq. Metodun parametrinə ötürülən məlumatlar düşəcək:

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

Valideyn komponentin templatində uşaq komponent teqinə hadisə bağlayaq:

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

Uşaq komponentdə müxtəlif hadisələr yayan üç düymə düzəldin. Yayılan hadisələri valideyn komponentdə tutun.