Angular2, HostListener, wie kann ich ein Element anvisieren? Kann ich basierend auf der Klasse zielen?

Question

Wie kann ich in Angular2 ein Element innerhalb des HostListener-Dekorators ausrichten?

@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); 
    } 

Die beiden ersten Arbeit. Jede andere Sache, die ich versucht habe, wirft einen EXCEPTION: Unsupported event target undefined for event dragstart

Also, kann ich es zu einem gezielten Element implementieren? Wie?

Answer 1

@HostListener() unterstützt nur window, document und body als globale Ereignisziele, andernfalls unterstützt es nur das Komponenten-Hostelement.

Answer 2

Da die akzeptierte Antwort nicht wirklich hilft, das Problem zu lösen, hier ist eine Lösung.

Eine bessere Möglichkeit, dies zu erreichen, besteht darin, eine Direktive zu erstellen. Auf diese Weise können Sie die Direktive zu einem beliebigen Element hinzufügen, und die Listener werden nur für dieses bestimmte Element ausgelöst.

Zum Beispiel:

@Directive({ 
    selector: "[focus-out-directive]" 
}) 
export class FocusOutDirective { 
    @Output() onFocusOut: EventEmitter<boolean> = new EventEmitter<false>(); 

    @HostListener("focusout", ["$event"]) 
    public onListenerTriggered(event: any): void { 
     this.onFocusOut.emit(true); 
    } 
} 

dann auf Ihre HTML-Elemente, die Sie diesen Listener anwenden möchten, die Richtlinie Wähler auf, fügen Sie einfach in diesem Fall focus-out-directive, und dann liefern die Funktion, die Sie auf Ihrer Komponente auslösen wollen .

Beispiel:

<input type='text' focus-out-directive (onFocusOut)='myFunction($event)'/>

Answer 3

auf einem Element hören:

import { Renderer2 } from '@angular/core'; 
... 
constructor(private renderer: Renderer2) {} 

// Get this.myElement with document.getElement... or ElementRef 

ngOnInit() { 
    // scroll or any other event 
    this.renderer.listen(this.myElement, 'scroll', (event) => { 
    // Do something with 'event' 
    console.log(this.myElement.scrollTop); 
}); 

}