如何为自定义元素使用HostListener？ （角2）

Question

我可以使用HostListener进行文档收听：

@HostListener('document:click', ['$event'])
someAction(event) {
    console.log('done');
}

如何监听元素的click事件。例如：

<span class="someClass"></span>

Answer 1

@HostListener('click', ['$event'])是监听主机元素本身的事件。没有其他用例可供他们使用。

一个例外是全局事件，例如您用于window:，document:或body等全球事件目标。

要听取任意元素，请使用

<span class="someClass" (click)="someAction($event)"></span>

Answer 2

Gunter的答案是正确的，但您可以使用HostListener制作一个指令，以获得更全面的使用感（如喜欢/喜欢的按钮）。

@Directive({
selector: '.favorite'
})
class FavoriteDirective(){
 @HostListener('click', ['$event.target']) onClick(_element) {
    ...
  }
}