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

Eigene Direktiven

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Video erstellen Sie Ihre erste eigene Attribut-Direktive.
06:18

Transkript

In den kommenden Minuten möchte ich gerne gemeinsam mit euch die erste Attribut-Direktive erzeugen. Eine Attribut-Direktive hat die Aufgabe, dass wenn sie an ein html-Element hinzugefügt wird bestimmte Funktionalitäten bereitstellt. Also wenn ich jetzt hier beispielsweise eine Direktive erzeugen wollen würde, die "myItalic" heißt, hätte sie dann eine besondere Aufgabe zu erfüllen. Und ich möchte diese Aufgabe simulieren, mit einem Feature, dass wir schon mittels der NgClass-Direktive hier einmal implementiert haben. Nämlich, dass die Klasse "italic" immer dann hinzugefügt werden soll, wenn die Bedingung hier "true" ist. Ihr könnt ja hier erkennen, "Italic"_Klasse drangehängt wenn "true". und "false" entsprechend nicht. Okay. Das möchte ich jetzt gerne nutzen, innerhalb einer eigenen Direktive, die ich hier erzeugen möchte, und die ich dann "myItalic" nennen möchte. Damit ich das Ganze nun realisieren kann, beginne ich damit, dass ich die Direktive an sich erzeuge. Die Direktive ist für mich eine reine Helfer-Angelegenheit, das heißt, ich erzeuge die Direktive in einem Unterordner. Der Unterordner soll "utils" heißen. Und die Direktive selbst nenne ich dann "italic.directive" ".ts". Großartig. Hier ist sie dann auch gleich angelegt. Und eine Direktive wird im Grunde genommen genauso aufgebaut, wie eine Komponente, mit dem Unterschied, dass sie halt kein Template-Element hat. DAs heißt, ich beginne damit, dass ich dann hier eine Klasse erzeuge. "myItalic" Wunderbar. Die Klasse soll im ersten Moment nichts machen und bereichert das Ganze jetzt mit Meta-Informationen. In diesem Fall verwende ich "Directive" dafür. "Directive" wird jetzt hier automatisch importiert, wie ihr sehen könnt. Färben wir das hier mal fix. So, da ist der Import. Und "Directive" selber erwartet jetzt halt die Metainformation. Und auch hier habe ich einen Selektor. Und der Selektor beschreibt jetzt, dass das Ganze ein Attribut sein soll. Deswegen die eckigen Klammern. Und wie soll das Attribut heißen? Schaut mal, "myItalics" soll das Kind heißen. Also zurück und "myItalic" eintragen. Und schon weiß die Direktive, wann sie greifen soll. Um jetzt das automatische Binden der Italic-Klasse zu realisieren, kann ich eine weitere Direktive nutzen. Die Direktive ist eigentlich extrem cool, denn ich kann zum Beispiel mit dieser Direktive bestimmen, welche Bindungen auf ihr ausgeführt werden sollen. Die Direktive heißt HostBindung. Wenn ich "HostBinding" als Direktive hier verwende, habe ich den Vorteil, dass ich HostBinding sagen kann, binde an den Host, das heißt, an das html-Element an dem diese Direktive gebunden ist, etwas, nämlich eine Klasse in diesem Fall, und der Klassenname ist "italic". Und das Ganze ist gebunden mit einem Wert. Das nenne ich "isItalic" und das ist ein "boolean" mit dem Wert "true". Das hat also jetzt hier zur Folge, dass automatisch, sobald die Direktive "myItalic" an ein html-Element gesetzt ist, das html-Element dann mit einer css-Klasse "italic" bereichert wird, in dem Moment, wo innerhalb der Klasse hier der Wert isItalic "true" ist, was wir ja initial gesetzt haben. Bleibt jetzt natürlich die entscheidende Frage: Warum sehe ich das eigentlich nicht? Weil das Ganze jetzt hier greift, beziehungsweise das "myItalic" greift. Denn ich habe es ja schon hier im Grunde genommen definiert. Ds ist ganz einfach zu erklären. Ihr müsst natürlich dem Compiler beschiedsagen, dass er mit dieser Direktive arbeiten soll, das heißt, diese Direktive muss in ein Modul rein. Empfehlenswert ist es jetzt also, als allerersten Schritt zunächst einmal ein Modul zu machen, für alle eure "utils"-Elemente, die ihr in Zukunft erzeugen wollt. Weil ich faul bin, werde ich mir hierfür einfach das User-Modul hier klauen und nenne das jetzt an dieser Stelle "utils.module". Und bestätige das Ganze. Schaue mir nun "utils.module" an und muss natürlich ein paar Sachen glattziehen, denn was jetzt hier diesmal deklariert werden muss, ist eben nicht die User-Komponente, sondern die "MyItalic"-Direktive. Und die "MyItalic"-Direktive muss auch wieder exportiert werden. Damit ist das Ganze ein Shared-Module. Und das hat dann zur Folge, dass ich, wenn ich hier auch noch den richtigen Namen gebe, "UtilsModule", ich nun dieses UtilsModule beliebig quasi in anderen Projekten anwenden kann, Und sobald das UtilsModule dann importiert wird, hätte das zur Folge, dass automatisch die Italic-Direktive greifen würde. Das möchte ich euch noch beweisen. Um euch das zu beweisen, muss ich natürlich, wie ich es gerade erwähnt habe, das UtilsModule jetzt implementieren. Wo implementiere ich es? Ins AppModule. Wenn ich das jetzt hier dranhänge, hat das dann zur Folge, - so, wunderbar - hat das Ganze dann zur Folge, dass dann UtilsModule importiert wird. Durch den Import sorgen wir automatisch dafür, dass MyItalic, weil es ja hier exportiert ist, im AppModule ein Bestandteil wird und dementsprechend aufgelöst wird. Und hier seht ihr auch wunderbar, dass hier gleich User italic dargestellt wird. Bitte denkt dran, dass wir hier sobald der Wert "false" wäre, überhaupt gar kein Problem hätten, dann das italic auch wieder auszumachen, das heißt, wir könnten jetzt im nächsten Schritt dafür sorgen, dass das HostBindung, oder der Wert für das HostBinding mit "isItalic" änderbar ist. Und das hätte dann wiederum zur Folge, dass wir das Italic je nachdem, in welcher Konstellation wir es brauchen, ein- und ausschalten könnten, beziehungsweise die Klasse dranhängen und abhängen könnten. In diesem Video haben wir unsere erste Direktive gemeinsam erzeugt.

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!