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

Als Leser möchte ich Details eines Buchs abrufen können, um zu entscheiden, ob der Inhalt für mich von Interesse ist.

 Bei Auswahl eines Listeneintrags soll die Bücherliste ausgeblendet und stattdessen eine Detailansicht mit Büchern angezeigt werden.

 Es soll ein Button in der Detailansicht existieren, der dafür sorgt, dass die Detailansicht ausgeblendet und die Liste der Bücher wieder eingeblendet wird.

Die gelernte Theorie der Event Bindings wollen wir jetzt praktisch am BookMonkey anwenden. Bisher hat die Anwendung eine Listenansicht für die Bücher. Zusätzlich soll jetzt eine Detailansicht angelegt werden, in der man ein einzelnes Buch betrachten kann.

Buchliste und Detailseite sind dabei jeweils eigenständige Komponenten, die in die Hauptkomponente AppComponent eingebunden sind. Damit nur immer eine der beiden Komponenten angezeigt wird, wollen wir die jeweils andere mit der Direktive ngIf ausblenden.

Beide Komponenten können ein Event an die Hauptkomponente übermitteln, um die jeweils andere Ansicht anzuzeigen. Damit kann man dann zwischen den beiden Ansichten umschalten. Das einzelne anzuzeigende Buch wird mit einem Property Binding an die Detailansicht übergeben.

Damit sieht die geplante Kommunikation im Komponentenbaum so aus:

Abb. 6–10 Kommunikation zwischen Komponenten im BookMonkey