Читать книгу Angular - Ferdinand Malcher - Страница 209

Wenn wir eine Komponente an ein DOM-Element binden, können wir aus der Komponente heraus Ereignisse triggern. Diese Ereignisse können wir auf dem Element abfangen und verarbeiten, wie wir es gerade gelernt haben.

EventEmitter

Dazu denken wir uns zunächst eine neue Komponente Event-Component. Wir wollen in dieser Komponente das Event fooEvent triggern und aus der Komponente herausgeben. In der Klasse legen wir deshalb eine Eigenschaft fooEvent an und initialisieren sie mit einem sogenannten EventEmitter. Dieses Objekt brauchen wir, um ein Ereignis auszulösen. Mit dem Typparameter in spitzen Klammern geben wir an, von welchem Typ der zurückgegebene Payload ist. Im Zweifel sollte hier any eingetragen werden.

Der Decorator @Output()

Um anzuzeigen, dass die Eigenschaft foo Ereignisse aus der Komponente herausgeben kann, verwenden wir den Decorator @Output(). Analog zum Decorator @Input() definieren wir damit die öffentliche Schnittstelle unserer Komponente und legen genau fest, welche Daten herein- und hinausfließen.

Die Methode emit()

Zum Auslösen von Events verfügt der EventEmitter über die Methode emit(value). Das Argument value ist der Event-Payload. Sollen keine zusätzlichen Daten übertragen werden, können wir den Payload auch undefiniert lassen.

Im Template unserer EventComponent legen wir einen Button an. Das click-Event binden wir an eine Handler-Methode, die das Event foo-Event auslöst und aus der Komponente »hinauswirft«.

<!-- Template -->

<button (click)="handleClick()">foo auslösen</button>

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

@Component({ /* ... */ })

export class EventComponent {

@Output() fooEvent = new EventEmitter<any>();

handleClick() {

this.fooEvent.emit();

}

}