Տվյալների փոխանցում ծնողական կոմպոնենտին Angular-ում

Հնարավոր է տվյալներ փոխանցել դուստր կոմպոնենտից ծնողականին։ Դա արվում է իռարման իրադարձություններ հատուկ օբյեկտի EventEmitter և մեթոդի emit միջոցով։ Դուստր կոմպոնենտը կիրարվի իրադարձություններ՝ միաժամանակ իրադարձության հետ փոխանցելով որոշ տվյալներ, իսկ ծնողական կոմպոնենտը կբռնի իրադարձությունները՝ ստանալով տվյալները ծնողական կոմպոնենտից։

Փորձենք գործնականում։ Դրա համար մեզ անհրաժեշտ է կատարել մի շարք քայլեր։ Սկզբում մեր դուստր կոմպոնենտում իմպորտացնենք դեկորատորը @Output և կլասը EventEmitter:

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

Այժմ դուստր կլասում ստեղծենք հատկություն onData, որի արժեքը կլինի նոր օբյեկտ EventEmitter, որը պարունակում է տող՝

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

Այժմ ստեղծենք send մեթոդը, որի կանչը կիրարվի onData իրադարձությունը ծնողական կոմպոնենտ նշված տեքստով՝

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

Դուստր կոմպոնենտի թեմփլեյթում ստեղծենք կոճակ, որի վրա կլիկի ժամանակ կկանչվի send մեթոդը՝

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

Ծնողական կոմպոնենտում ստեղծենք մեթոդ onData, որն ավտոմատ կերպով կկանչվի, երբ դուստր կոմպոնենտից կիրարվի համապատասխան իրադարձությունը։ Մեթոդի պարամետրի մեջ կհայտնվեն փոխանցված տվյալները՝

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

Ծնողական կոմպոնենտի թեմփլեյթում կապենք դուստր կոմպոնենտի թեգին իրադարձությունը՝

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

Դուստր կոմպոնենտում ստեղծեք երեք կոճակ, որոնք իրարման են բացում տարբեր իրադարձություններ։ Բռնեք իրարված իրադարձությունները ծնողական կոմպոնենտում։