Angular 9全局事件绑定，类似于jQuery

Question

比方说，有一个btn类，并且无论元素在哪里以及何时获取btn类，我都需要一个全局事件处理程序。

使用jQuery，它将看起来像这样：

$('.btn').on('click', ...);

但是，如何使用Angular 9做到这一点？

Answer 1

我建议创建一个directive，然后在整个应用程序中使用它。例如：

import { Directive, ElementRef, HostListener} from '@angular/core';

@Directive({
  selector: '[myBtn]'
})
export class MyBtnDirective {

  constructor(private el: ElementRef) { }

    @HostListener('click', ['$event']) onClick($event){
        console.info('clicked: ' + $event);
    }
}

然后像这样使用它：

<button myBtn class="btn">My button</button>

Answer 2

var elem = document.querySelector('.btn');
elem.addEventListener('click', function(){});