Angular. Ferdinand Malcher
Wir können dem @Input()-Decorator als Argument deshalb den Namen des DOM-Propertys übergeben, an das wir binden wollen. Die Komponenteneigenschaft kann dann einen beliebigen Namen haben.
@Input('myProperty') myProp: string;
Listing 6–29 Input-Propertys umbenennen
Umbenennung vermeiden
Aber Achtung: Wenn wir die Bindings umbenennen, kann das Verwirrung stiften, weil die Namen unterschiedlich sind. Wir sollten diesen Weg also möglichst vermeiden und immer dieselben Namen verwenden. Das empfiehlt auch der Angular-Styleguide.
Achten Sie bitte darauf, die Input-Propertys immer korrekt zu typisieren. Geben wir keinen Typen an, wird dem Property implizit der Typ any zugewiesen, und wir können das Property dann nicht mehr typsicher verwenden.
6.2.5Den BookMonkey erweitern
Refactoring – Property Bindings
Um die Komplexität der Listenansicht zu verringern, soll eine Komponente geschaffen werden, die ein einzelnes Buch repräsentiert.
Jeder Listeneintrag der Bücherliste soll durch eine eigene Komponente repräsentiert werden.
Jedem Listenelement sollen die Daten eines Buchs übermittelt werden.
Im vorhergehenden Abschnitt haben wir ein Element der Listenansicht direkt im Template der Buchliste definiert. Das Listenelement war ein Link-Element <a>8, in dem die Buchinfos angezeigt wurden. Dieses Template war relativ komplex, deshalb ist es sinnvoll, dafür eine eigene Komponente zu verwenden.
Wir wollen in diesem Schritt das Listenelement aus der Buchliste in eine separate Komponente auslagern. Das Template der neuen Komponente entspricht einem Listenelement, wie es zuvor in der BookListComponent definiert war. Dadurch wenden wir das Prinzip der Verschachtelung von Komponenten an und erreichen eine bessere Modularität der Anwendung.
Abb. 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