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

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';