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

Ausdrücke interpolieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Innerhalb einer Vorlage lassen sich Bereiche austauschen, die mittels einer Bindung definiert werden. Dieses Video verdeutlicht das Prinzip der Ausdrucksinterpolation.
03:49

Transkript

Ich möchte gerne mit euch über Bindungen sprechen. Und im ersten Schritt möchte ich innerhalb dieses Videos darüber sprechen, wie ich mittels einer Bindung einen Ausdruck interpolieren kann. Und ich habe mich die ganze Zeit gefragt, wie erkläre ich das eigentlich mit dem Interpolieren, und habe eigentlich in Google eine perfekte Erklärung dafür gefunden: "In einen Text später etwas einfügen." Nichts anderes ist die Interpolation, eigentlich innerhalb der Angular 2.0-Welt, wenn ich das mit einer Bindung mache. Ich bin nämlich ohne weiteres in der Lage, eine Interpolation dadurch in die Wege zu leiten, dass ich mit geschweiften Klammern arbeite. Innerhalb dieser geschweiften Klammern bin ich jetzt in der Lage, entweder auf eine Eigenschaft, oder aber auch auf eine Methode zu referenzieren, die in der Komponentenklasse wiederzufinden ist. Ich kann aber auch ganz normal Operationen hier einfügen. Ich bin also in der Lage, hier auch einfach hinzuschreiben "1+1". Und wenn ich dann das Ganze speichere, erkennt ihr hier, dass er mir hier das Ergebnis anzeigt, nämlich die "2". Was passiert also? Ich habe hier einen Ausdruck definiert, der interpoliert wird, und zur Laufzeit ausgewertet wird. Würde ich jetzt innerhalb meiner Klasse hingehen und Werte definieren, so zum Beispiel die Eigenschaft "name", vom Typ String gleich "Saban Ünlü". Was glaubt ihr was ich machen kann? Dann wäre ich nämlich einfach in der Lage, jetzt hier oben anstatt "Saban Ünlü" fest einzubauen einfach in geschweiften Klammern zu definieren. Speichere ich das Ganze wieder, habt ihr hier wunderbar hier die Referenz wieder. Damit ich euch das beweisen kann, dass das jetzt wirklich von hier kommt, kann ich auch stattdessen "username" machen. Ganz toll übrigens hier, dass WebStorm hier wunderbar auch dabei die Code-Completion erkennt. Speichere das nochmal, und ihr seht: Klasse, hat funktioniert! Auf genau diese Art und Weise kann ich auch diese Bindung darüber bauen, dass ich die Rückgabe einer Methode dazu verwende. So bin ich also ohne Probleme in der Lage, hier einfach hinzugehen, eine Methode zu definieren, "getDescription" zum Beispiel. Die Methode gibt einen String zurück. Jetzt werde ich mir noch mal ganz fix den Lorem-Text holen. So, und den gebe ich hier zurück. Perfekt. Verwende die Interpolation und diesmal "getDescription". Speichere das wieder und hier seht ihr, dass er wunderbar die Bindung über die Methode und deren Rückgabewert an dieser Stelle hinbekommen hat. Natürlich bin ich auch in der Lage, wenn ich eine solche Methode binde, die Bindung so zu definieren, dass ich auch Parameter mit übergen kann. Das ist also besonders wertvoll, weil der gesamte Javascript-Ausdruck hier an dieser Stelle in dem Moment interpretiert wird und dann aufgelöst wird. Würde ich also ganz einfach mal eine neue Methode hier machen, "getSum". Damit will ich einfach eine Summe berechnen, mit der Zahl eins vom Typ "number" und der Zahl zwei vom Typ "number". Der Rückgabewert wird wiederum eine Zahl sein, also ein return von "num1" plus "num2". Großartig. Zweite Bindung. "getSum", eins und zwei. Ich speichere das Ganze, und ihr seht hier hinten, hervorragend, die drei. In diesem Video habt ihr mit mir gemeinsam gelernt, wie ihr Werte binden könnt mittels einer Ausdruck-Interpolation.

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!