Datu nodošana vecākkomponentē Angular

Datus var nodot no bērna komponentes uz vecāka komponenti. Tas tiek darīts, emitējot notikumus, izmantojot īpašu objektu EventEmitter un metodi emit. Bērna komponente emitēs notikumus, kopā ar notikumu pārraidot dažus datus, bet vecāka komponente uztvers notikumus, saņemot datus no bērna komponentes.

Izmēģināsim to praksē. Lai to izdarītu, mums jāveic virkne soļu. Vispirms mūsu bērna komponentē importēsim dekoratoru @Output un klasi EventEmitter:

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

Tagad bērna klasē izveidosim īpašību onData, kuras vērtība būs jauns objekts EventEmitter, kas satur virktni:

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

Tagad izveidosim metodi send, kura izsaukšana emitēs notikumu onData vecāka komponentē ar doto tekstu:

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

Bērna komponentes veidnē izveidosim pogu, uz kuras klikšķinot, tiks izsaukta metode send:

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

Vecāka komponentē izveidosim metodi onData, kas tiks automātiski izsaukta, kad no bērna komponentes tiks emitēts atbilstošs notikums. Metodes parametrā nonāks pārsūtītie dati:

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

Vecāka komponentes veidnē piesaistīsim bērna komponentes tagam notikumu:

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

Bērna komponentē izveidojiet trīs pogas, kas emitē dažādus notikumus. Notveriet emitētos notikumus vecāka komponentē.