Angularda ata komponente maglumat ýollamak

Çagadan komponentden ata komponente maglumat ýollap bolýar. Bu, ýörite bir EventEmitter obýekti we emit metodi arkaly ýagdaýlar çykarylmagy arkaly amala aşyrylýar. Çaga komponent käbir maglumatlary ýagdaý bilen birlikde ýollaryp, ýagdaýlar çykarar, ata komponent bolsa ata komponentden maglumat alyp, ýagdaýlary tutar.

Amalynda synap göreli. Bunuň üçin biziň birnäçe ädimleri ýerine ýetirmek zerurlygy bar. Başlangyçda çaga komponentimize @Output dekoratoruny we EventEmitter synpyny import edeliň:

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

Indi çaga synpymyzda onData atly aýratynlyk ýasalyň, onuň bahasy setir ýüzlenýän täze EventEmitter obýekti bolsun:

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

Indi send metodyny ýasalyň, onuň çagyrylmagy ata komponente onData ýagdaýyny bellän tekst bilen çykarar:

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

Çaga komponentiň şablonunda send metoduň çagyrlýan düwmäni ýasalyň:

<button (click)="send()">
	maglumat ýolla
</button>

Ata komponentde onData metodyny ýasalyň, ol çaga komponentden degişli ýagdaý çykarylanda awtomatiki ýagdaýda çagrylar. Metoda girýän parametre ýollanan maglumatlary alyar:

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

Ata komponentiň şablonunda çaga komponent tegi ýagdaý bilen baglalyň:

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

Çaga komponentde dürli ýagdaýlar çykarýan üç düwme ýasalyň. Çykarylan ýagdaýlary ata komponentde tutuň.