Читать книгу Angular - Ferdinand Malcher - Страница 194

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>⁸, 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>