Angular2, HostListener, wie kann ich das target-element? kann ich die target-basierend auf der Klasse?
In Angular2, wie kann ich das target-element innerhalb des HostListener decorator?
@HostListener('dragstart', ['$event'])
onDragStart(ev:Event) {
console.log(ev);
}
@HostListener('document: dragstart', ['$event'])
onDragStart(ev:Event) {
console.log(ev);
}
@HostListener('myElement: dragstart', ['$event'])
onDragStart(ev:Event) {
console.log(ev);
}
@HostListener('myElement.myClass: dragstart', ['$event'])
onDragStart(ev:Event) {
console.log(ev);
}
Den beiden ersten arbeiten. Eine andere Sache, die ich ausprobiert habe, wirft ein EXCEPTION: Unsupported event target undefined for event dragstart
So, kann ich es implementieren, um eine gezielte element? Wie?
Können Sie rxjs übergeben Beobachter von den Eltern auf das Kind von der Veranstaltung?
InformationsquelleAutor Gerard | 2017-01-17
Du musst angemeldet sein, um einen Kommentar abzugeben.
@HostListener()
unterstützt nurwindow
,document
, undbody
als Globale event-Ziele, sonst ist es unterstützt nur die Komponenten host-element.Wenn das element innerhalb der Komponente können Sie eine stackoverflow.com/questions/32693061/..., um eine
ElementRef
des Elements und dann können SieElementRef.nativeElement.addEventListener(...)
verwenden, oder Sie können stackoverflow.com/a/41610950/217408. Wenn es außerhalb der Komponente, dann können Siedocument.body.querySelector(...).addEventListener(...)
Die zweite option funktioniert nicht für mich wegen stackoverflow.com/questions/41695838/... und ich versuche nun zu verstehen deinem ersten link, danke!
Der erste link funktioniert nur für Elemente, die Hinzugefügt werden, indem Sie Eckige. Wenn Sie einige JavaScript-code oder jQuery-Bibliothek zum erstellen des elements-es wird nicht funktionieren.
Sie werden Elemente erstellt, in Winkel, Sie sind in einer Vorlage innerhalb einer Komponente, und ich möchte anfügen, einen listener für alle die Elemente, die mit einem bestimmten Klassennamen. Aber ich finde es schwer zu erreichen ist (dies sollte einfach sein-also ich muss fehlt etwas grundlegendes hier)
InformationsquelleAutor Günter Zöchbauer
Da die akzeptierte Antwort nicht wirklich helfen, das problem zu lösen, hier ist eine Lösung.
Einen besseren Weg, um dies zu erreichen, ist durch die Schaffung einer Richtlinie, auf diese Weise können Sie fügen Sie die Direktive für jedes element, die Sie wollen, und die Hörer werden nur Auslöser für dieses Besondere element.
Beispiel:
Dann auf Ihre HTML-Elemente, die Sie anwenden möchten, diese Hörer, fügen Sie einfach die Richtlinie Selektor, in diesem Fall
focus-out-directive
, und stellen Sie dann die Funktion, die Sie möchten, um trigger auf Ihre Komponente.Beispiel:
<input type='text' focus-out-directive (onFocusOut)='myFunction($event)'/>
dieser Anwendungsfall ist für einzelne HTML-Elemente. Um dies zu erreichen, müssten Sie zum importieren dieser Richtlinie in die entsprechenden Module, wo Sie es verwenden möchten, und dann gemäß der HTML-oben, fügen Sie die Direktive für jedes element, das Sie wollen, das Ereignis ausgelöst wird. Zum Beispiel, wenn Sie hatte verschachtelte untergeordnete Elemente, die Sie wollten das Ereignis ausgelöst wird, müssen Sie die Versorgung der Richtlinie für diese Elemente auch. Sie könnten dann entweder definieren Sie verschiedene Funktionen, wenn Sie brauchen, zu unterscheiden, welches element wurde angeklickt, oder pass ein weiterer parameter z.B. meinefunktion($event, 'element1')
Ja, ich weiß, wie Sie eine Richtlinie, ich wollte nur wissen, ob dieser Ansatz sollte in der Arbeit auf Kinder-Elemente. Aber ich habe herausgefunden, dass dies funktioniert nur auf dem host. Also danke.
InformationsquelleAutor Googs
InformationsquelleAutor Noufal PP
Ich denke, der bessere Weg zur globalen listener @hostliterner aber wenn Sie wollen, um den Gegner einige element, das Sie tun können, wie diese
in Ihrem Winkel-Komponente
InformationsquelleAutor Rey
Hören Sie auf ein element:
}
InformationsquelleAutor alex351
Können Sie auch beliebige element ohne @hostlistener und kann fügen Sie die erforderlichen Ereignisse, die durch die folgende Weise
InformationsquelleAutor Zahidul Islam Jamy