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

Im ersten Teil dieser Iteration haben wir bereits gelernt, dass wir Komponenten über ihren Selektor an HTML-Elemente im Template binden können. Verwenden wir das Element <my-component>, so wird an dieser Stelle die Komponente mit ihrer Logik und ihrem Template eingesetzt.

Komponentenbaum aus verschachtelten Komponenten

Auf diese Weise können wir Komponenten beliebig tief verschachteln. Im Template der Komponente MyComponent können weitere Komponenten an DOM-Elemente gebunden werden usw. Die Komponenten unserer Anwendung referenzieren sich damit untereinander und bilden eine Baumstruktur (engl. Component Tree), wie sie beispielhaft in Abbildung 6–3 dargestellt ist.

Abb. 6–3 Schema eines Komponentenbaums

Die allererste Komponente der Anwendung ist die Hauptkomponente (engl. Root Component). Sie wird beim Bootstrapping der Anwendung geladen. Alle darunterliegenden, eingebundenen Komponenten werden Kindkomponenten (engl. Child Components) genannt.

Durch die Verschachtelung können wir unsere Anwendung modular gestalten. Wir können einzelne Teile der Anwendung in Komponenten auslagern, die einzeln wartbar, wiederverwendbar und testbar sind.