Додаҳо ба компоненти волидайн дар 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>

Дар компоненти фарзанд се тугма созед, ки рӯйдодҳои гуногунро сарнавиш мекунанд. Рӯйдодҳои сарнавишшударо дар компоненти волидайн қабл кунед.