Andmete edastamine vanemakomponendis Angularis

Andmeid saab edastada lapskomponendist vanemakomponendisse. Seda tehakse sündmuste emissiooniga, kasutades spetsiaalset objekti EventEmitter ja meetodit emit. Lapskomponent emitteerib sündmusi, edastades koos sündmusega mõningaid andmeid, ja vanemakomponent püüab sündmusi kinni, saades andmeid vanemakomponendist.

Proovime seda praktikas. Selleks peame tegema mitmeid samme. Kõigepealt impordime oma lapskomponenti dekoraatori @Output ja klassi EventEmitter:

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

Nüüd teeme lapsklassis omaduse onData, mille väärtuseks on uus objekt EventEmitter, mis sisaldab stringi:

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

Nüüd teeme meetodi send, mille kutsumine emitteerib sündmust onData vanemakomponenti etteantud tekstiga:

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

Lapskomponendi mallis teeme nupu, mille klõpsamisel kutsutakse välja meetod send:

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

Vanemakomponendis teeme meetodi onData, mida kutsutakse automaatselt välja, kui lapskomponendist emitteeritakse vastav sündmus. Meetodi parameetrisse satuvad edastatud andmed:

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

Vanemakomponendi mallis seome lapskomponendi sildi külge sündmuse:

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

Lapskomponendis tehke kolm nuppu, mis emititeerivad erinevaid sündmusi. Püüdke emitteeritud sündmused kinni vanemakomponendis.