Angular 2 Grundkurs

Komponenten-Eigenschaften

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Komponenten können mit benutzerdefinierten Eigenschaften versehen werden, die zudem gebunden werden können. Wie das Ganze funktioniert, demonstriert dieses Video.
04:03

Transkript

Wie wir in der Lage sind, native Eigenschaften eines html-Elements, wie beispielsweise "innerText" oder in diesem Fall, die source-Eigenschaft zu binden, haben wir bereits gelernt. Ich möchte euch aber auch zeigen, dass wir in der Lage sind, eine Komponente so zu definieren, dass auch sie eigene Eigenschaften bekommen kann, die nicht im nativen Kontext zu finden sind. Das Ganze ist ganz einfach zu realisieren. Nehmen wir mal an, wir wollen "username" nicht mehr innerhalb der Klasse selbst definieren, sondern als Eigenschaft von außen zuweisen können. Dann können wir das sehr einfach realisieren. indem wir "username" mit einem Decorator versehen. Der Decorator, den wir dafür verwenden wollen, ist "@input". Und der input-Decorator erwartet optional einen String, der dann entsprechend einen Alias für diese Bindung dann erstellen kann, was ich euch aber später zeigen möchte. Zunächst einmal ganz kurz. Hier sehen wir, dass ein "import" erweitert wurde durch das "input" und das bedeutet, "input" ist ein Element aus dem Core-Modul. Sollte euer Editor dieses automatische Hinzufügen des imports nicht unterstützen, denkt bitte unbedingt daran, das zu machen, und auch natürlich Komma-separiert. Wunderbar. Jetzt werde ich als nächsten Schritt diese Eigenschaft nicht definieren innerhalb der Klasse, sodnern möchte sie von außen übergeben. Von außen übergeben bedeutet ja, dass es innerhalb meiner Appliationskomponente genutzt wird. Ich wechsle also in die "app.component.ts". Und in "app-component.ts" können wir ja hier sehen,. dass wir die "app.component.html" verwenden. Die öffnen wir auch einmal in einem separaten Fenster und parallel. Das bedeutet, hier ist unser user, den wir hier finden. Und wenn wir jetzt hier mal reinschauen, dann werdet ihr sehen, dass "username" automatisch jetzt von WebStorm als Bindung einer Eigenschaft angeboten wird. Ich bin jetzt also in der Lage, "username" mit einem Element aus "app.component" zu binden. Und was ich jetzt hier mache ist zum Beispiel mal "username" als String zu definieren. und hier schreibe ich dann einfach mal "Peter Müller" rein. Kann dann anschließend "username" ganz einfach über die Bindung hier übergeben. und - Schwupp - haben wir "Peter Müller" hier drin Was ist passiert? Ih habe eine Eigenschaftsbindung gemacht. Angular ist hingegangen und hat geschaut, ob es eine native Eigenschaft "username" für diese Komponente gibt. Hat sie nicht gefunden, also fängt sie an zu überprüfen, ob in den Metadaten eine Information zu finden ist, dass "username" gebunden werden soll. Da ist sie dann fündig geworden, das haben wir hier durch den Decorator entsprechend in die Wege geleitet. den wir hier sehen, und jetzt war es dann überhaupt gar kein Problem, diese User-Information an dieser Stelle durchzuleiten. Und alternativ wären wir jetzt sogar noch in der Lage einen Alias hier zu vergeben, das heißt, dass wir nicht wollen, dass die Eigenschaft von außen mit dem gleichen Namen wie die interne Eigenschaft vergeben wird, sondern zum Beispiel "selectedusername". Und das kann ich dann entsprechend jetzt hier verwenden, und das hätte zur Folge, dass das genauso funktioniert, aber nach außen hin heißt das Ganze dann hier "selectedusername". Und intern wird das als "username" dann weitergehandelt und durchgearbeitet. Ist natürlich nur eine alternative Geschichte und nicht zwingend notwendig. Und daher baue ich es jetzt hier auch wieder zurück. In diesem Video habt ihr gelernt, wie ihr eigene Eigenschaften für eure Komponenten erstellen könnt und diese bindet.

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!