Data-oordrag na die ouerkomponent in Angular

Data kan van die kinderkomponent na die ouerkomponent oorgedra word. Dit word gedoen deur gebeure uit te stuur met behulp van die spesiale objek EventEmitter en die metode emit. Die kinderkomponent sal gebeure uitstuur en saam met die gebeurtenis sekere data oordra, terwyl die ouerkomponent die gebeure sal opvang en die data van die ouerkomponent sal ontvang.

Kom ons probeer dit in die praktyk. Hiervoor moet ons 'n paar stappe doen. Om te begin, moet ons in ons kinderkomponent die dekorateur @Output en die klas EventEmitter invoer:

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

Nou maak ons 'n eienskap onData in die kinderklas, waarvan die waarde 'n nuwe objek EventEmitter sal wees wat 'n string bevat:

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

Nou maak ons 'n metode send, waarvan die oproep die gebeurtenis onData na die ouerkomponent sal uitstuur met die gegewe teks:

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

In die templaat van die kinderkomponent maak ons 'n knoppie wat, wanneer daarop geklik word, die metode send sal oproep:

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

In die ouerkomponent maak ons 'n metode onData wat outomaties opgeroep sal word wanneer die ooreenstemmende gebeurtenis van die kinderkomponent uitgestuur word. Die oorgedra data sal in die parameter van die metode val:

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

In die templaat van die ouerkomponent bind ons die gebeurtenis aan die tag van die kinderkomponent:

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

Maak drie knoppies in die kinderkomponent wat verskillende gebeure uitstuur. Vang die uitgestuurde gebeure in die ouerkomponent op.