Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Angular 2 Grundkurs

Eigenschaften binden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Video sehen Sie, wie Sie Eigenschaften binden können und damit ein HTML-Element beeinflussen.
03:55

Transkript

Angular 2.0 bietet euch auch die Möglichkeit an, dass ihr Eigenschaften binden könnt, die innerhalb eines html-Elements definiert sind. Lasst uns einmal ganz kurz gucken, was das im Klartext bedeutet. Ich habe hier ein Beispiel, wo ich einen header-Bereich habe. Hier habe ich eine ganz normale Interpolation über eine Bindung mit der Eigenschaft "username", die in meiner Klasse definiert ist. Gucken uns das Ergebnis mal im Browser an, sehen wir, dass sich nun in meine User-Komponente kann und da ist der header-Bereich. Sehr spannend ist es, dass ich ja innerhalb des Inspektors neben den Styles, die ich mir sehr oft anschaue, natürlich auch die Properties, also die Eigenschaften der Elemente anschauen kann und die header-Eigenschaft hier, die ich mir gerade anschaue hat zum Beispiel die Möglichkeit, dass sie mittels "innerText", wie wir hier sehen können wunderbar den Eintrag, also den Inhalt definieren lassen kann. Ich bin also, wenn ich Eigenschaften binden möchte, auch in der Lage, hier das ein wenig umzuschreiben, indem ich sage "innerText" ist gleich der "username". Schließe dann entsprechend hier. Und dann seht ihr, dass es hervorragend funktioniert. Ich bin auch in der Lage hier Ausdrücke noch davor zu schreiben, wenn ich möchte. Damit bin ich dann entsprechend ohne Probleme in der Lage, die Interpolation hier so zu definieren, dass ich sage, erst zwei Anführungszeichen und dann der Wert, der hier als "username" innerhalb der Klasse definiert worden ist. Und das als Eigenschaft von "inner"-html Ich bin aber ganz ehrlich. Ich würde selber jetzt in meinen laufenden Projekten dieses "innerText" nicht verwenden. Ich würde ganz normal die Bindung über den Ausdruck benutzen. Aber es gibt auch Situationen, wo ich dringend die Möglichkeit haben muss, auf diese Eigenschaft eines html-Elementes drauf zuzugreifen, und damit dann im Angular 2.0-Kontext in der Lage zu sein, Werte zu definieren. Ich werde das mal ganz schnell demonstrieren, indem ich fix mal ein Image-Knoten mache. Diesen Image-Knoten definiere ich hier, in meiner Beschreibung und das ist hier ein kleines Kätzchen. Ich entferne auch hier die Summe, die ist etwas unschön. Und dann habe ich hier mein Kätzchen, das vor dem Beschreibungstext dann entsprechend zu sehen ist. Lasst uns auch hier mal schauen, was hier für Eigenschaften innerhalb dieses Bilds zu finden sind. Wenn ich also das Bild mir hier anschaue, dann sehen wir, dass der "image"-Knoten tatsächlich auch intern diese source-Eigenschaft besitzt und die source-Eigenschaft genau auf diese UL verweist. Ich bin also in der Lage, diese Eigenschaft jetzt zu binden. Dafür schnappe ich mir das als URL, definiere das als Eigenschaft vom Typ String. Großartig. und es gibt nun eine zweite Schreibweise, mit der ich Eigenschaften binden kann, und zwar, indem ich eckige Klammern vor dem Eigenschaftsnamen definiere. Das ist meine bevorzugte Schreibweise, wenn ich Eigenschaften binde. Also sage ich hier: Innerhalb meines image-Knotens soll die Eigenschaft source gebunden werden. Mit dem Wert, den Wert, den ich hier in meiner Klasse definiert habe: "imageUrl". Aber der Vorteil, den ihr hier seht, ist ganz eindeutig. Ich muss nicht mit diesen geschweiften Klammern arbeiten. Habe natürlich dann auch nicht mehr den Vorteil, dass ich hier diesen Ausdruck interpolieren kann. Stattdessen kann ich dann hier mit den eckigen Klammern sagen, die source-Eigenschaft soll gesetzt werden. Mit der Eigenschaft, die in der entsprechenden Komponentenklasse definiert ist. In diesem Video haben wir gemeinsam gelernt, wie wir in der Lage sind, Eigenschaften zu binden.

Angular 2 Grundkurs

Lernen Sie Angular 2 von Grund auf kennen und erkunden Sie die Möglichkeiten der Bindungen sowie den Einsatz von Direktiven und Pipes.

4 Std. 37 min (65 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!