Пренесување на податоци во родителската компонента во 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()">
	испрати податоци
</button>

Во родителската компонента да направиме метод onData, кој автоматски ќе се повикува, кога од детската компонента ќе биде испратени соодветниот настан. Во параметарот на методот ќе пристигнуваат пренесените податоци:

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

Во темплејтот на родителската компонента да го поврземе до тегот на детската компонента настанот:

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

Во детската компонента направете три копчиња, кои испраќаат различни настани. Фатете ги испратените настани во родителската компонента.