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

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 {

}

}