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

我可以使用

HostListener

进行文档侦听：

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

如何侦听元素的

单击
事件。例如：

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


@HostListener（'click'，['$event']）
用于侦听主机元素本身上的事件。没有其他可以使用它们的用例

一个例外是与全局事件目标一起使用的全局事件，如
窗口：
，
文档：
，或
正文

要侦听任意元素，请使用

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

Gunter的答案是正确的，但您可以使用HostListener发出指令，以获得更全局的使用感（如favorite/like按钮）

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