Angular. Ferdinand Malcher
=== '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() {
this.showListEvent.emit();
}
}
Listing 6–48 BookDetails-Component (book-details.component.ts)
Template für die Detailansicht
Das zugehörige Template stellt die Buchinfos ansprechend dar. Die Thumbnails werden am unteren Seitenrand klein dargestellt. Die Liste der Autoren und Thumbnails durchlaufen wir mit der Direktive ngFor, ebenso das generierte Array für die Sternanzeige. Bei der Autorenliste verwenden wir das besondere Containerelement <ng-container>, siehe Kasten auf Seite 126. Außerdem integrieren wir einen Button, der die Methode showBookList() auslöst und damit zur Listenansicht wechselt.
<div *ngIf="book">
<h1>{{ book.title }}</h1>
<h3 *ngIf="book.subtitle">{{ book.subtitle }}</h3>
<div class="ui divider"></div>
<div class="ui grid">
<div class="four wide column">
<h4>Autoren</h4>
<ng-container *ngFor="let author of book.authors">
{{ author }}<br>
</ng-container>
</div>
<div class="four wide column">
<h4>ISBN</h4>
{{ book.isbn }}
</div>
<div class="four wide column">
<h4>Erschienen</h4>
{{ book.published }}
</div>
<div class="four wide column">
<h4>Rating</h4>
<i class="yellow star icon"
*ngFor="let r of getRating(book.rating)"></i>
</div>
</div>
<h4>Beschreibung</h4>
<p>{{