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

Zunächst widmen wir uns der Hauptkomponente AppComponent und implementieren den geplanten Datenfluss, wie er in der Abbildung 6–10 dargestellt ist. In der Komponentenklasse führen wir den Status view-State ein. Dieses Property soll entweder den String list oder details enthalten. Um sicherzustellen, dass kein falscher Wert gesetzt werden kann, definieren wir uns einen TypeScript-Typen, der alle möglichen Zustände beinhaltet. Der neue Typ trägt den Namen ViewState und hat die möglichen Werte list und details.¹¹ Die Buchliste soll nur angezeigt werden, wenn die Eigenschaft viewState auf list gesetzt ist, die Detailkomponente nur dann, wenn der Wert details lautet. Da beim Laden der Anwendung noch keine Aktion durchgeführt wurde, setzen wir als Standardwert list ein.

Die Detailkomponente muss später immer über das anzuzeigende Buch verfügen. Wir legen deshalb in der AppComponent zusätzlich das Property book an. Hier wird ein Book abgelegt, das später über ein Property Binding an die Detailkomponente übergeben wird.

Um zwischen den beiden Zuständen list und details zu wechseln, sollen die beiden Kindkomponenten später ein Event werfen. Um auf diese Events zu reagieren, führen wir in der AppComponent die zwei Methoden showList() und showDetails() ein. Sie sollen den Wert im view-State ändern, sodass die passende Komponente angezeigt wird. Die Methode showDetails() empfängt außerdem ein Buch-Objekt als Event-Payload und schreibt es in die Eigenschaft book der Komponentenklasse.

import { Component } from '@angular/core';

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

type ViewState = 'list' | 'details';

@Component({

selector: 'bm-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

book: Book;

viewState: ViewState = 'list';

showList() {

this.viewState = 'list';

}

showDetails(book: Book) {

this.book = book;

this.viewState = 'details';

}

}