{
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>{{ book.description }}</p>
<div class="ui small images">
<img *ngFor="let thumbnail of book.thumbnails"
[src]="thumbnail.url">
</div>
<button class="ui red button"
(click)="showBookList()">
Zurück zur Buchliste
</button>
</div>
Listing 6–49 Template der BookDetails-Component (book-details.component.html)
Der <ng-container>
Wenn wir eine Direktive wie ngFor nutzen, so binden wir diese an ein Element im Template. Mit ngFor wird das Element dann so oft vervielfältigt, wie Items in dem Array existieren – auch wenn wir eigentlich kein DOM-Element für diese Inhalte benötigen. Auch mit ngIf haben wir diese Situation: Wir wollen eigentlich nur Teile des Templates zu einem logischen Block zusammenfassen und müssen dafür unnötige DOM-Elemente einfügen.
Um diese Unschönheit zu lösen, stellt Angular ein passendes Hilfsmittel bereit: den <ng-container>. Dieses Element erzeugt kein DOM-Element, sondern wird direkt durch seinen Inhalt ersetzt. Der Container wird hauptsächlich verwendet, um darauf eine Direktive wie ngFor oder ngIf anzuwenden.
<span *ngFor="let item of ['a', 'b', 'c']">
{{ item }},
</span>
<!-- Resultat: -->
<!-- <span>a,</span><span>b,</span><span>c,</span> -->
<ng-container *ngFor="let item of ['a', 'b', 'c']">
{{ item }},
</ng-container>
<!-- Resultat: -->
<!-- a, b, c, -->
Die Implementierung ist damit vollständig: Wir können nun zwischen den beiden Komponenten unserer Anwendung hin- und herwechseln. Klicken wir ein Buch in der Listenansicht an, werden wir zur Detailansicht geleitet. Von dort aus gelangen wir mit einem Klick auf den Button wieder zurück zur Buchliste.
Code Review
Die Lösung ist nicht optimal.
In diesem Kapitel haben wir im BookMonkey zwei wechselbare Ansichten implementiert. Dazu haben wir zwei Komponenten angelegt, von denen jeweils nur eine angezeigt wird. Die Kommunikation zwischen den beiden Komponenten haben wir mit Events organisiert. Zugegeben, dieser Weg ist sehr umständlich und nicht gut in der Praxis einsetzbar. Das Prinzip hat noch ein paar Schwächen:
keine URLs für Seiten, beim Neuladen wird immer die Buchliste angezeigt
keine Navigation im Browser mit Vor/Zurück
für mehrere Komponenten sehr aufwendig
tiefere Verschachtelung von Komponenten sehr kompliziert
nicht modular, weil Komponenten intern voneinander abhängen
keine echten Links, sondern nur click-Events, dadurch keine Navigation mit der Tastatur möglich
Im Einzelfall mag diese Lösung einsetzbar sein, sie ist für mehr als zwei Komponenten aber viel zu umständlich. Es muss eine robustere Lösung her. Ab Seite 147 widmen wir uns deshalb ausführlich dem Prinzip des Routings, mit dem wir diese Probleme gezielt angehen können.
