Datenübertragung an die übergeordnete Komponente in Angular

Daten können von einer untergeordneten Komponente an eine übergeordnete Komponente übertragen werden. Dies geschieht durch das Emittieren von Ereignissen mit Hilfe eines speziellen Objekts EventEmitter und der Methode emit. Die untergeordnete Komponente emittiert Ereignisse und überträgt dabei einige Daten, während die übergeordnete Komponente die Ereignisse abfängt und die Daten von der untergeordneten Komponente erhält.

Lassen Sie uns das in der Praxis ausprobieren. Dazu müssen wir eine Reihe von Schritten durchführen. Zunächst importieren wir in unsere untergeordnete Komponente den Dekorator @Output und die Klasse EventEmitter:

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

Nun erstellen wir in der untergeordneten Klasse eine Eigenschaft onData, deren Wert ein neues Objekt EventEmitter sein wird, das einen String enthält:

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

Nun erstellen wir eine Methode send, deren Aufruf ein Ereignis onData an die übergeordnete Komponente mit dem angegebenen Text emittiert:

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

Im Template der untergeordneten Komponente erstellen wir eine Schaltfläche, bei deren Klick die Methode send aufgerufen wird:

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

In der übergeordneten Komponente erstellen wir eine Methode onData, die automatisch aufgerufen wird, wenn von der untergeordneten Komponente das entsprechende Ereignis emittiert wird. In den Parameter der Methode werden die übermittelten Daten übergeben:

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

Im Template der übergeordneten Komponente binden wir an den Tag der untergeordneten Komponente das Ereignis:

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

Erstellen Sie in der untergeordneten Komponente drei Schaltflächen, die verschiedene Ereignisse emittieren. Fangen Sie die emittierten Ereignisse in der übergeordneten Komponente ab.