Перадача дадзеных у бацькоўскі кампанент у 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>

У даччыным кампаненце зрабіце тры кнопкі, якія выпраменьваюць розныя падзеі. Злавіце выпрамененыя падзеі ў бацькоўскім кампаненце.