Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Angular 2 Grundkurs

Direktivenwerte

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Dieses Video zeigt, wie man Werte einer Direktive übernehmen und verarbeiten kann.
06:43

Transkript

In diesem Video möchte ich euch gerne zeigen wie ihr in der Lage seid, auch Werte innerhalb einer Direktive entgegenzunehmen. und diese dann anschließend zu verarbeiten. Ich will das anhand eines Beispiels machen, wo ich die Farbe der Schrift ändern möchte. Auf dem Objekt, wo eine Direktive hinterlegt worden ist. Und diese Direktive soll die Schriftfarbe als solches dann auch entgegennehmen können. Damit das Ganze realisiert werden kann, werde ich jetzt hier, weil ich ein wenig schreibfaul bin, die bereits erstellte Direktive hier duplizieren. Und nenne sie hier einfach "color.directive" Innerhalb der "color.directive" ist es nun so, dass der Listener selber mich nicht interessiert, das heißt, ich möchte nicht auf irgendwelche Ereignisse des Hosts reagieren. Ich möchte auch an dieser Stelle nicht eine Klasse binden, sondern eine Style-Eigenschaft. Und die Style-Eigenschaft, die ich binden möchte, ist "colour", damit ich die Schriftfarbe ändern kann. "color" ist die Font-Color dann gebunden mit diesem Wert. Das bedeutet, wenn ich innerhalb dieser Klasse nun diesen Wert hier ändere, hat das automatisch zur Folge, dass sich dann auch die Style-Eigenschaft "color" mitändern wird. Die Direktive selber soll "myColor" heißen. Sehr gut. HostListener muss ich hier nicht mehr importieren. DAs sieht doch schon mal prima aus. Im nächsten Schritt werden wir jetzt, um Werte entgegenzunehmen, mit dem Input-Decorator arbeiten. Sehr ähnlich haben wir ja bereits mit Komponenten gearbeitet. Mit dem Input-Decorator bin ich in der Lage, einen Wert als Attribut von außen innerhalb eines Objektes, sei es die Direktive oder Komponente, entgegenzunehmen. Dabei ist es mit überlassen, ob ich den Wert als Eigenschaft oder auch als Getter/Setter dann nutze. Das möchte ich euch jetzt sehr gerne zeigen, indem ich hier wieder mein Input-Decorator herhole. Der Input-Decorator ist Bestandteil des Cores. Achtet also bitte darauf, dass wenn euer Editor den Import hier nicht automatisch macht, dass ihr das selber durchführt. Anschließend erzeuge ich einen Setter Setter zu erzeugen ist einfach, "set" mit einem Leerzeichen und anschließend den Namen des Setters. Das soll hier "myColor" sein. Ich nenne das jetzt bewusst "myColor", weil der Selector für meine Direktive ebenfalls "myColor" heißt. Wenn jetzt auch der Input-Wert hier "myColor" ist, hat das zur Folge, dass ich quasi direkt in einem Abwasch "myColor" als Direktive auf einem Host hinterlegen kann und dann gleich binden kann, indem ich hier den Input-Wert dafür verwende. Der Setter von myColor ist keine Magie. Der erwartet einen color-Wert, als string, und sorgt dafür, dass "fontColor" den color-Wert entgegennimmt. Das bedeutet, binde ich jetzt hier den color-Wert, wird der Setter aufgerufen. Der Wert der übergeben wird wird auf "fontColor" hier durchgereicht. Dann brauche ich noch einen Getter. Der Getter gibt einen string zurück, nämlich die Farbe der Schrift. Das ist dann "return.this fontColor". Das sieht doch schon sehr gut aus. Was muss ich jetzt machen? Naja, im Wesentlichen muss ich nun nur noch darauf achten, dass ich jetzt myColor implementiere. Und "myColor" implementiere ich, über die Klasse "MyColor" logischerweise, auf die ich den Direktive-Decorator angewendet habe. Das heißt ich wechsle jetzt einmal in mein Utils-Modul zurück. Und im Utils-Modul werde ich jetzt neben der Deklaration von der "MyItalic"-Directive jetzt zusätzlich noch "MyColor" einbinden. Und natürlich auch "MyColor" exportieren. Hier sehen wir auch, dass "MyColor" automatisch von WebStorm implementiert wurde, also importiert wurde. Und warum ich es exportiere, ist relativ einfach, ich wiederhole es hier nochmal ganz fix. Und zwar exportiere ich es deswegen, damit beim Import dieses Utils-Moduls automatisch dann auch diese Direktive mir zur Verfügung steht. Perfekt. Im Wesentlichen muss ich nun nur noch dafür sorgen, dass ich die Direktive jetzt auch verwenden kann. Dafür wechsle ich wieder hier in die View zurück und werde jetzt diesmal "myColor" nutzen. "myColor" nutze ich jetzt im ersten Schritt mal als eine feste Bindung, indem ich jetzt hier dafür sorgen werde, dass ich innerhalb der Applikationskomponente einen Wert setze für die "fontColor". Das habe ich hier schon mal vorbereitet. Die "fontColor" habe ich jetzt auf den Wert "red" gesetzt, als string, das heißt, wenn ich jetzt hier anschließend die "fontColor" hier zuweise, dann könnt ihr sehen, dass wunderbar, hier dann "myColor" seine Arbeit getätigt hat und die Schrift rot umgewandelt hat. Genauso wie wir es dann entsprechend auch wollten. Zusätlich könnte ich natürlich auch noch dafür sorgen, dass myColor in dem Moment aktiv wird, wo beispielsweise ein Element selektiert ist. Und das möchte ich euch einmal fix demonstrieren. Hierfür lege ich euch das hier zur Seite, dann könnt ihr es später nochmal nutzen und diesmal verwende ich myColor so, dass ich das über die Abfrage hier nutzen möchte. Ich klaue mir das im Grunde genommen nur, weil ich faul bin das neu zu tippen. Gleich wird das Ganze ein Schuh sein. Und zwar schaut mal, myColor ist jetzt keine Attribut-Direktive, die normal gebunden wird, sondern halt über geschweifte Klammern. Und das mache ich so, indem ich sage: Sollte "user" genau gleich dem "selectedUser" sein, dann sei bitte so nett und zeige das Ganze in Rot an. Und ansonsten in Schwarz. Großartig. Speicher das Ganze und kann es jetzt nun einmal testen. Selektiere ich jetzt hier dieses Element, wird es rot. Und entsprechend, wenn es deselktiert ist, wir des wieder schwarz und das Selektierte wird dann wieder erneut rot. In diesem Video haben wir gemeinsam gelernt, wie wir i der Lage sind, eine Direktive so zu erstellen, dass neben dem Selektor, den ich hier angebe, als myColor, gleichzeitig auch noch ein myColor-Wert als Eigenschaft definiert wird, um dann gleichzeitig die Direktive nicht nur auf das Element anzuwenden, sondern auch noch gleich Eigenschaften entgegenzunehmen.

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!