Komponenteninteraktion

In dieser Lektion lernen Sie, wie Komponenten in Angular miteinander kommunizieren, insbesondere Eltern- und Kindkomponenten.

Interaktion zwischen Eltern- und Kindkomponenten

Komponenten müssen häufig Daten gemeinsam nutzen. Elternkomponenten können Daten mithilfe von Input-Properties an Kindkomponenten weitergeben.

@Input() verwenden

Verwenden Sie den Dekorator @Input(), um Daten von einer Elternkomponente zu empfangen:

@Input() userData: string;

Daten an eine Kindkomponente übergeben

Übergeben Sie Daten in der Vorlage Ihrer Elternkomponente mithilfe von Property Binding:

<app-child [userData]="parentData"></app-child>

Kommunikation von der Kind- zur Elternkomponente

Kindkomponenten kommunizieren mithilfe von Ereignissen und dem Dekorator @Output() nach oben.

@Output() verwenden

Erstellen Sie einen Event-Emitter, um Daten von der Kind- an die Elternkomponente zu senden:

@Output() dataEvent = new EventEmitter<string>();

Ereignisse auslösen

Lösen Sie Ereignisse aus der Kindkomponente aus:

sendData() {
  this.dataEvent.emit('Hello from Child');
}

Ereignisse in der Elternkomponente verarbeiten

Verarbeiten Sie ausgelöste Ereignisse in der Vorlage der Elternkomponente:

<app-child (dataEvent)="handleEvent($event)"></app-child>

Zusammenfassung

Sie verstehen nun, wie Komponenten in Angular über Inputs und Outputs miteinander interagieren können. Üben Sie weiter!