Verwendung von @Output() in Angular zur Datenübertragung zwischen Komponenten

In Angular ist @Output() eine Schlüsseldekoration, die verwendet wird, um Daten von einer untergeordneten Komponente an eine übergeordnete Komponente zu übergeben.

Es ist ein allgemeiner Standard in Angular, Daten in einer Art Hierarchie von oben nach unten (von übergeordneten zu untergeordneten Komponenten) zu fließen, dies wird in der Regel durch den Einsatz von @Input() erreicht. Es gibt jedoch Fälle, in denen Informationen von einer untergeordneten Komponente an eine übergeordnete Komponente übergeben werden müssen. In solchen Fällen kommt @Output() ins Spiel.

@Output() dient nicht nur zur Datenübertragung, sondern fungiert auch als Event Emitter, der ein Ereignis auslöst, sobald eine bestimmte Aktion innerhalb der untergeordneten Komponente ausgeführt wird. Dieses Ereignis kann dann von der übergeordneten Komponente abgefangen und behandelt werden.

Ein praktisches Beispiel könnte eine Schaltfläche in einer untergeordneten Komponente sein, die ein Ereignis auslöst, sobald sie gedrückt wird. Mit @Output() kann die übergeordnete Komponente auf dieses Ereignis reagieren und entsprechend handeln.

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

@Component({
 selector: 'app-child',
 template: `<button (click)="sendMessage()">Send Message</button>`,
})
export class ChildComponent {
 @Output() messageEvent = new EventEmitter<string>();

 sendMessage() {
   this.messageEvent.emit('Hello from Child Component!')
 }
}

In dem obigen Beispiel würde das Klicken auf die Schaltfläche die sendMessage()-Funktion auslösen. @Output() messageEvent löst dann das Ereignis aus, das von der übergeordneten Komponente abgefangen werden kann.

Die beste Praxis besteht darin, @Output() und EventEmitters für die Kommunikation von der untergeordneten zur übergeordneten Komponente und @Input() für die Datenübertragung von der übergeordneten zur untergeordneten Komponente zu verwenden. Auf diese Weise bleibt der Datenfluss im Code übersichtlich und leicht nachvollziehbar.