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

Ereignisse binden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Video zeigt der Trainer, wie man Ereignisse innerhalb einer Komponente binden kann.
04:00

Transkript

Wir haben mittlerweile gelernt, wie wir Attribute binden können. Wir haben gelernt, wie wir Eigenschaften binden können oder auch Ausdrücke. Und jetzt möchte ich euch sehr gerne zeigen, wie wir auch Ereignisse binden können. Wir sind nämlich in der Lage, sowohl native als auch benutzerdefinierte Ereignisse zu binden innerhalb einer Komponente. Und ich möchte euch zeigen, wie das funktioniert. Im Wesentlichen ist das ganz einfach. Ich habe hier eine Schaltfläche, die entsprechend "Ready to Click" heißt. Die seht ihr hier auf der rechten Seite, wenn sie fertig gerendert ist. Ein Ereignis kann ich auf einer Schaltfläche wie dieser definieren, indem ich einfach die Klammer öffne. Und wenn ich die Klammer öffne, könnt ihr hier ganz toll sehen, dass mir WebStorm schon anbietet, welche möglichen Ereignisse ich hier verwenden kann. Und ich möchte das Klick-Ereignis definieren. Anschließend kann ich hier eine Methode definieren, die aufgerufen werden soll. Genauso wie bei der Methode, die ich hier innerhalb des Ausdrucks verwende, muss die Methode "onClick" natürlich zwingend dann auch hier innerhalb der Komponentenklasse definiert sein. Das mache ich jetzt hier fix. Und da soll dann einfach Folgendes passieren. Ich möchte die Eigenschaft "disabled" auf "true" setzen. Erinnert euch bitte daran, "disabled" habe ich initial auf "false" gesetzt und in dem Moment, wo das entsprechend hier ein Klick-Ereignis erhält soll dann "onClick" ausgeführrt werden, "disabled" wird auf "true" gesetzt, und dadurch das Attribut "disabled" automatisch auf dieser Schaltfläche gesetzt. Teste ich das, seht ihr, hervorragend, es funktioniert genauso wie erwartet. Zusätzlich möchte ich das Ganze jetzt auch nochmal mit einem Konsolen-Log versehen, das heißt ich erzeuge jetzt hier ein "console.log" und sage dann "click". Teste das fix. Hier ist dann auch schon mal meine Konsole. Und klicke ich hier drauf, seht ihr, dass dann entsprechend das Klick-Ereignis hier getriggert wurde und entgegengenommen wurde. Ich möchte euch nun zeigen, dass wir auch in der Lage sind, wenn wir so ein Ereignis binden, das Ereignis selber zu transportieren, indem wir hier als Parameter des Ereignis-Handlers "$event" eintragen. Anschließend bin ich dann nämlich in der Lage, hier ein event-Parameter entgegenzunehmen, - Perfekt - und auch ausgeben zu lassen. Teste ich das Ganze nun, klicke hier drauf, und ihr seht, es ist ein Maus-Event angekommen. Spannend ist auch hier, dass ihr erkennen könnt, das ist das native Maus-Event, das heißt alle nativen Informationen des Maus-Events könnt ihr auch nutzen. Natürlich sind wir auch in der Lage, weitere native Events zu binden. Ich möchte euch das einmal über ein "input"-Feld zeigen. So und das was gebunden werden soll, ist der Typ "text". Da oben ist er. Großartig. Und das Ereignis, auf das ich jetzt hören möchte ist an dieser Stelle "keydown". Und es soll "onkeydown" hier übergeben werden. Wieder mit einem Event hier an der Stelle. Und dadurch, dass ich faul bin, dupliziere ich das schnell. Benenne das hier als "onkeydown". Und lasse mir dann hier über "onkeydown" das Ereignis wiedergeben. Teste das Ganze jetzt schnell. Gebe hier mal gleich fix was ein. So. Und ihr seht jetzt wunderbar, dass ich hier die "keydown"-Events bekommen habe. Ich bekomme auch die Information darüber, dass es ein "s" war, welchen keycode es hat und so weiter. In diesem Video haben wir gemeinsam gelernt, wie wir in der Lage sind, Ereignisse zu binden.

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!