Angular 2 Grundkurs

Ereignisse in Direktiven

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Direktiven sind in der Lage, Ereignisse zu dem Element hinzuzufügen, auf das sie angewendet werden. Wie so eine Ereignisbindung funktioniert, erklärt dieses Video.
02:18

Transkript

Wir haben bereits gelernt, wie wir mittels des Dekorators "HostBinding" in der Lage sind, auf dem Objekt. auf dem eine Direktive angewendet worden ist Bindungen zu realisieren. In diesem Fall ist es die Klasse "italic", die immer dann hinzugefügt werden soll, wenn "isItalic" "true" ist. Analog kann ich auch Ereignisse so binden. Ich kann also direkt auf der Host-Klasse, also dem Träger dieser Direktive, ein Ereignis binden, so beispielsweise, indem ich Host-Listen als Decorator verwende. Der "HostListener", wie ihr seht, erwartet hier einen Eventnamen als Parameter. Optional dann auch noch zusätzlich, dass man Argumente hinzugeben kann, wenn man dies möchte. In meinem Fall ist der Eventname, auf den ich hören möchte "mouseenter". Und was soll passieren, wenn auf diesem Objekt ein "MouseEnter passiert? Dann soll eine Funktion aufgerufen werden, die ich jetzt hier direkt nach dem Decorator hinzufüge. Und das ist dann quasi die Methode "OnMouseEnter". Und diese OnMouseEnter-Methode soll nichts anderes machen, als "this.isItalic" auf "true" setzen. Und das Gleiche machen wir jetzt nochmal mit "mouseleave". Und das wir dann hier ein "false" setzen. Testen wir das Ganze nun, sehe wir, dass wenn ich mit der Maus draufgehe dass dann entsprechend das Ganze Italic angewendet wird. Gehe ich raus, wird das Italic wieder deaktiviert, also die Klasse Italic entfernt. Das Ganze funktioniert, wie bereits erwähnt, deswegen, weil ich mittels des HostListeners-Decorators in der Lage bin, auf Ereignisse des Hosts zu reagieren und einer Methode dann entsprechend zuzuweisen, die in der Direktive selber dann definiert wurde. Damit ist quasi dieses "OnMouseEnter" der Listener für "mouseenter" der Host-Komponente indem hier "myItalic" verwendet wurde. In diesem Video haben wir das erste Ereignis auf dem Host gebunden um eine Direktive zu beeinflussen.

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!