如何使用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) {
    ...
  }
}