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

Die Buchliste erweitern

Zum Wechseln der Ansichten müssen wir die Kommunikation zwischen den Komponenten herstellen. Wir kümmern uns zunächst um die Buchliste. Wird ein Buch in der Liste angeklickt, soll ein Event nach oben zur Hauptkomponente gereicht werden.

In der Listenkomponente erstellen wir dazu die Eigenschaft showDetailsEvent, die wir mit dem Decorator @Output() versehen. Der Name des Propertys ist automatisch der Name des Events. Um das Event auslösen zu können, erzeugen wir einen EventEmitter. Die Methode showDetails() sorgt schließlich dafür, dass ein konkretes Buch-Objekt zusammen mit dem Event auf die Reise geschickt wird.

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

import { Book } from '../shared/book';

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

export class BookListComponent implements OnInit {

books: Book[];

@Output() showDetailsEvent = new EventEmitter<Book>();

ngOnInit(): void { /* ... */ }

showDetails(book: Book) {

this.showDetailsEvent.emit(book);

}

}