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

Im letzten Schritt widmen wir uns der BookDetailsComponent, die derzeit nur aus einem Grundgerüst besteht. Wir müssen die Komponente mit Leben füllen und das übermittelte Buch darstellen. Außerdem müssen wir das Event showListEvent aus der Komponente werfen, wenn der Nutzer die Ansicht wechseln möchte.

Wir legen als Erstes die Eigenschaft book an. Sie wird über ein Property Binding mit einem Book-Objekt gefüllt, wie wir es schon von der Item-Komponente aus dem vorherigen Kapitel kennen. Für die Bewertung des Buchs sollen im Template Sterne angezeigt werden. Die Methode getRating(num) gibt dazu ein Array mit leeren Elementen zurück. Es wird als Basis genutzt, um die Sterne mit ngFor mehrfach anzuzeigen.

Für das Event showListEvent legen wir ein passendes Property an. Es trägt den Decorator @Output() und wird mit einem EventEmitter initialisiert. Die neue Methode showBookList() löst dieses Event schließlich aus, um damit der Elternkomponente mitzuteilen, dass die Ansicht gewechselt werden soll. Um die Methode auszuführen, legen wir gleich einen Button im Template an.

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

import { Book } from '../shared/book';

@Component({

selector: 'bm-book-details',

templateUrl: './book-details.component.html',

styleUrls: ['./book-details.component.css']

})

export class BookDetailsComponent implements OnInit {

@Input() book: Book;

@Output() showListEvent = new EventEmitter<any>();

ngOnInit(): void {

}

getRating(num: number) {

return new Array(num);

}

showBookList() {

this.showListEvent.emit();

}

}