Tool TSLint weist uns darauf hin, dass wir eine Regel gebrochen haben: Eine Methode soll immer einen festgelegten Rückgabetyp besitzen. Geben wir hier also den Rückgabetyp void an (wie beim ngOnInit()), so verschwindet die Meldung.
Wir sind allerdings der Meinung, dass eine Methode nicht immer zwangsläufig einen Rückgabetyp angeben muss, denn der Compiler kann auch ohne unsere Hilfe den korrekten Typ ermitteln. Machen wir hier keine expliziten Angaben, ist der Quelltext etwas kürzer. Wir wollen die Regel daher vollständig deaktivieren. Dazu ändern wir in der Datei tslint.json den Eintrag für typedef von true auf false.
"typedef": [
false,
"call-signature"
],
Ob Sie dies für Ihr Projekt auch tun, bleibt Ihnen überlassen. Es gibt für diese Regel keine richtige oder falsche Entscheidung.
Das Event showDetailsEvent übermittelt in seinem Event-Payload das ausgewählte Buch. Wir haben schon dafür gesorgt, dass dieses Buch im Property book gespeichert wird. Von dort aus übergeben wir das Objekt an die BookDetailsComponent.
<bm-book-list
*ngIf="viewState === 'list'"
(showDetailsEvent)="showDetails($event)"></bm-book-list>
<bm-book-details
*ngIf="viewState === 'details'"
(showListEvent)="showList()"
[book]="book"></bm-book-details>
Listing 6–45 Template der AppComponent (app.component.html)
Der Build schlägt fehl.
Der Build der Anwendung wird jetzt fehlschlagen, denn wir haben Events abonniert, die wir noch nicht implementiert haben. Darum kümmern wir uns im nächsten Schritt.
Event aus der BookListComponent werfen
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);
}
}
Listing 6–46 Ausschnitt aus der Komponente BookListComponent (book-list.component.ts)
Im Template der Buchliste fügen wir ein Event Binding für den Klick auf ein Buch hinzu. Wird ein Buch angeklickt, wird die Methode showDetails() aufgerufen und als Payload das jeweilige Buch aus der Liste übergeben. Dieses Buch-Objekt wird in der Hauptkomponente gespeichert und von dort an die Detailkomponente übergeben.
<div class="ui middle aligned selection divided list">
<bm-book-list-item class="item"
*ngFor="let b of books"
[book]="b"
(click)="showDetails(b)"></bm-book-list-item>
</div>
Listing 6–47 Template der BookListComponent (book-list.component.html)
Detailansicht implementieren
Im letzten Schritt widmen wir uns der BookDetailsComponent, die derzeit nur aus einem Grundgerüst besteht. Wir müssen die Komponente mit Leben füllen und das übermittelte Buch darstellen. Außerdem müssen wir das Event showListEvent aus der Komponente werfen, wenn der Nutzer die Ansicht wechseln möchte.
Wir legen als Erstes die Eigenschaft book an. Sie wird über ein Property Binding mit einem Book-Objekt gefüllt, wie wir es schon von der Item-Komponente aus dem vorherigen Kapitel kennen. Für die Bewertung des Buchs sollen im Template Sterne angezeigt werden. Die Methode getRating(num) gibt dazu ein Array mit leeren Elementen zurück. Es wird als Basis genutzt, um die Sterne mit ngFor mehrfach anzuzeigen.
Für das Event showListEvent legen wir ein passendes Property an. Es trägt den Decorator @Output() und wird mit einem EventEmitter initialisiert. Die neue Methode showBookList() löst dieses Event schließlich aus, um damit der Elternkomponente mitzuteilen, dass die Ansicht gewechselt werden soll. Um die Methode auszuführen, legen wir gleich einen Button im Template an.
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Book } from '../shared/book';
@Component({
selector: 'bm-book-details',
templateUrl: './book-details.component.html',
styleUrls: ['./book-details.component.css']
})
export class BookDetailsComponent implements OnInit {
@Input() book: Book;
@Output() showListEvent = new EventEmitter<any>();
ngOnInit(): void {
}
getRating(num: number) {
return new Array(num);
}
showBookList()
