id="ub9590fc5-26ee-4391-846d-a0fa571e78bc">
6.2Property Bindings: mit Komponenten kommunizieren
Im vorhergehenden Abschnitt haben wir eine erste Komponente eingeführt, mit der wir eine Listenansicht für unsere Buchbibliothek erstellt haben. Ihre wahre Stärke zeigen Komponenten allerdings dann, wenn sie verschachtelt werden. Wir wollen eine weitere Komponente einführen, die ein Element der Buchliste repräsentiert. Dabei werden wir das Prinzip der Property Bindings in der Praxis anwenden und lernen, wie Daten in eine Komponente hineinfließen können.
6.2.1Komponenten verschachteln
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.
6.2.2Eingehender Datenfluss mit Property Bindings
Wenn wir eine Anwendung aus verschachtelten Komponenten aufbauen, müssen die Komponenten miteinander kommunizieren können. Die Übertragung von Daten in eine Komponente hinein funktioniert über Property Bindings. Damit können wir Daten im Komponentenbaum nach unten übertragen. Der grundsätzliche Weg ist dieser: Über HTML-Attribute des Host-Elements setzen wir Eigenschaften der angebundenen Komponente. Innerhalb der Komponente können wir diese Eigenschaften auslesen.
Das Beispiel zeigt, wie Daten an Eigenschaften gebunden werden.
<my-component [property]="expression"></my-component>
Die Propertys werden wie Attribute im HTML angegeben. Wir verwenden hier die Notation mit eckigen Klammern, die wir schon in der Einführung kennengelernt haben. Angular setzt diese Schreibweise automatisch in ein Binding um. Der Ausdruck expression wird ausgewertet, und die Daten fließen über die Eigenschaft property in die Komponente hinein. Ändern sich die Daten, wird das Binding automatisch aktualisiert.
Tatsächlich sind Property Bindings gar nicht auf Komponenten beschränkt, sondern jedes Element des DOM-Baums besitzt Propertys, die sich mit Property Bindings schreiben lassen.
Abb. 6–4 Datenfluss von Eltern zu Kind mit Property Bindings
DOM-Eigenschaften
Dazu schauen wir uns zunächst an, was DOM-Propertys sind. Jeder Knoten im DOM-Baum ist ein Objekt. Wie jedes andere JavaScript-Objekt kann auch ein DOM-Element Eigenschaften und Methoden besitzen. Diese Eigenschaften können wir mit JavaScript auslesen und verändern:
const myImg = document.getElementById('myImg');
myImg.src = 'angular.png';
myImg.style.border = '1px solid black';
Listing 6–18 DOM-Eigenschaften mit JavaScript schreiben
Wir können nicht nur die nativen Propertys verwenden, sondern beliebige eigene Eigenschaften in ein DOM-Element schreiben, denn es ist ja ein einfaches JavaScript-Objekt.
Unterschied zwischen Attributen und DOM-Propertys
DOM-Eigenschaften haben aber keine Auswirkung auf das HTML. Das bedeutet, dass der HTML-Quelltext sich nicht verändert, wenn wir ein DOM-Property ändern. Darin unterscheiden sie sich von Attributen: Attribute werden im HTML notiert und liegen immer als Text vor. Sie werden einmal festgelegt und ändern sich dann während der Laufzeit nicht. In den meisten Fällen schreiben Attribute aber einen Wert in ein DOM-Property.
<img src="angular.png" title="Angular">
Listing 6–19 HTML-Element mit Attributen
Im Beispiel sind auf dem Element img die Attribute src und title gesetzt. Dadurch werden die gleichnamigen DOM-Propertys mit den angegebenen Daten gefüllt. Die Propertys können wir über das JavaScriptObjekt ändern.
Propertys ohne Attribute
Es ist nicht immer der Fall, dass ein Attribut ein Property mit demselben Namen beeinflusst. Es gibt auch Propertys, die nicht von einem Attribut geschrieben werden, sondern nativ auf dem Element existieren. Zum Beispiel besitzt das Element <p> die Eigenschaften textContent und innerHTML, die sich auf den Inhalt des Elements beziehen, aber nicht im HTML als Attribute gesetzt werden können. Andersherum gibt es Attribute, die keine Auswirkung auf ein Property haben.
Obwohl sie eng miteinander verzahnt sind, ist es wichtig, zwischen Attributen und Propertys eines Elements zu unterscheiden. Property Bindings werden eingesetzt, um die DOM-Propertys eines Elements zu ändern.
Zwischen den eckigen Klammern geben wir den Namen der Eigenschaft an, die wir setzen wollen. Als Wert für dieses »Attribut« wird immer ein Ausdruck angegeben. Für Property Bindings gibt es verschiedene Notationen, die im Wesentlichen alle dasselbe tun:
<element [property]="expression"></element>
Der Ausdruck expression wird ausgewertet, und der Rückgabewert in die DOM-Eigenschaft property geschrieben.
Attributschreibweise
Wollen wir einen String in eine Eigenschaft schreiben, können wir auch die Attributschreibweise verwenden. Es wird dann automatisch eine gleichnamige Eigenschaft angelegt.
<element property="value"></element>
Attribut und Interpolation
Für
