Блог

Я могу использовать HostListener для прослушивания документов:

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

Как я могу прослушивать click события для элементов. Например:

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

Ответ Гюнтера правильный, но вы можете создать директиву с помощью HostListener для более глобального смысла использования (например, кнопка «Избранное / нравится»).

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

@HostListener('click', ['$event']) заключается в прослушивании событий на самом элементе хоста. Другого варианта использования, для которого они могут быть использованы, нет.

Одним исключением являются глобальные события, подобные тем, которые вы использовали с глобальными целями событий, такими как window: , document: , или body .

Для прослушивания произвольных элементов используйте

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