Angular2,HostListener,我该如何定位元素？我可以根据课程进行定位吗？

在Angular2中,如何在HostListener装饰器中定位元素？

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

这两个第一部作品.我尝试过的任何其他事情都会提出一个问题EXCEPTION: Unsupported event target undefined for event dragstart

那么,我可以将它实现到目标元素吗？怎么样？

1> Günter Zöchb..：

---

@HostListener()仅支持window,document和body作为全局事件目标,否则它仅支持组件主机元素.

---

如果元素在组件内,您可以使用http://stackoverflow.com/questions/32693061/angular--typescript-get-hold-of-an-element-in-the-template/35209681#35209681之一得到元素的`ElementRef`然后你可以使用`ElementRef.nativeElement.addEventListener(...)`,或者你可以使用http://stackoverflow.com/a/41610950/217408.如果它在组件之外,那么你可以使用`document.body.querySelector(...).addEventListener(...)`

2> Googs..：

---

由于接受的答案实际上并没有帮助解决问题,因此这是一个解决方案.

实现此目的的更好方法是创建一个指令,这样您就可以将指令添加到您希望的任何元素,并且侦听器将仅触发此特定元素.

例如:

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

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

然后,在您希望应用此侦听器的HTML元素上,只需添加指令选择器(在本例中)focus-out-directive,然后提供要在组件上触发的函数.

例: