6–6 Die neue Item-Komponente in der Buchliste
Wir rufen uns zuvor noch einmal die Template-Struktur der Buchliste ins Gedächtnis, die wir schon im ersten Schritt verwendet haben:
<div class="ui middle aligned selection divided list">
<a class="item">
... Buch 1 ...
</a>
Listing 6–30 Template-Struktur der Buchliste
<a class="item">
... Buch 2 ...
</a>
...
</div>
Die grundlegende Struktur soll hier erhalten bleiben, nur wollen wir den Style und den Aufbau der Listen-Items über eine separate Komponente definieren.
Dazu erstellen wir zunächst die neue Komponente BookListItem-Component für die Detailansicht der Bücher. Zur Unterstützung können wir wieder die Angular CLI verwenden:
$ ng g component book-list-item
Listing 6–31 Komponente BookListItem mit der Angular CLI anlegen
Es ergibt sich die folgende Dateistruktur:
Um den Inhalt der Item-Komponente kümmern wir uns später und schauen uns zunächst die BookListComponent an.
BookListItem in die BookList einbauen
Hier verwenden wir nun die BookListItemComponent für die Darstellung der Listenelemente. Der bisherige Teil im Template soll durch die neue Komponente ersetzt werden. Wir setzen also statt des Link-Elements ein neues Element mit dem Namen <bm-book-list-item> ein. Dieser Elementname passt zum automatisch festgelegten Selektor der zuvor generierten Komponente. Da es sich weiterhin um ein Listenelement handelt, das über die CSS-Klasse item sein Aussehen erhält, muss die Klasse nun auf dieses neue Element angewendet werden.
Um der Item-Komponente mitzuteilen, welches Buch angezeigt werden soll, kommen Property Bindings zum Einsatz. Mit dem Ausdruck [book] übergeben wir dazu das jeweilige Buch-Objekt. Mit ngFor durchlaufen wir alle Bücher und erzeugen dadurch für jedes Buch ein neues Listenelement. Das anzuzeigende Buch liegt durch die Schleife dann jeweils in der Variable b vor. Dieses Objekt schreiben wir in das Property book der Kindkomponente. Damit fließen die Buchdaten in die Item-Komponente hinein und wir können sie innerhalb der Komponente wieder auslesen.
<div class="ui middle aligned selection divided list">
<bm-book-list-item class="item"
*ngFor="let b of books"
[book]="b"></bm-book-list-item>
</div>
Listing 6–32 Template der Komponente BookListComponent (book-list.component.html)
Item-Komponente mit Leben füllen
Als Nächstes kümmern wir uns um die Komponente BookListItem-Component, die jetzt ein einzelnes Buch in der Liste darstellen soll. Die Komponente soll zunächst keine Logik implementieren, deswegen bleibt die Klasse leer. Sie ist eine sogenannte Presentational Component, denn sie ist nur für die Anzeige von Daten verantwortlich.
In der Klasse legen wir mit dem Decorator @Input() fest, welche Daten in die Komponente hineinfließen. Wir erstellen dazu in der Komponentenklasse das Property book und versehen es mit dem Decorator. So liegt in diesem Property stets das Buch-Objekt vor, das wir mit dem Property Binding im letzten Schritt übergeben haben.
Mit der Typbindung wird sichergestellt, dass hier tatsächlich Book-Objekte verarbeitet werden.
import { Component, OnInit, Input } from '@angular/core';
import { Book } from '../shared/book';
@Component({
selector: 'bm-book-list-item',
templateUrl: './book-list-item.component.html',
styleUrls: ['./book-list-item.component.css']
})
export class BookListItemComponent implements OnInit {
@Input() book: Book;
ngOnInit(): void {
}
}
Listing 6–33 Komponente BookListItemComponent (book-list-item.component.ts)
Das Template der Komponente zeigt das jeweilige Buch an. Es entspricht im Wesentlichen dem HTML, das vorher in der BookList-Component vorlag, um die Bücher anzuzeigen. Wir haben diesen Teil nur an eine andere Stelle ausgelagert.
<img class="ui tiny image"
*ngIf="book.thumbnails && book.thumbnails[0] && book. thumbnails[0].url"
[src]="book.thumbnails[0].url">
<div class="content">
<div class="header">{{ book.title }}</div>
<div *ngIf="book.subtitle" class="description">{{ book.subtitle }}</div>
<div class="metadata">
<span *ngFor="let author of book.authors; last as l">
{{ author }}<span *ngIf="!l">, </span>
</span>
<br>
ISBN {{ book.isbn }}
</div>
</div>
Listing 6–34 Template der Komponente BookListItemComponent (book-list-item.component.html)
Das war’s auch schon! Die Buchdaten fließen nun in die Item-Komponente hinein und werden dort angezeigt. Das Ergebnis hat sich für den Nutzer nicht verändert. Für den Entwickler ist diese Unterteilung der Komponenten aber ein wichtiger Schritt, um die Anwendung zu modularisieren.
