Angular 9 全局事件绑定

Question

想象一下，您有一个大型企业应用程序，并且希望在单击具有 css 类的元素时有一个钩子，您不想编辑 css 类的每个用法并添加 Angular 指令，因为这是一项耗时的任务，并且错误是有保证的.

使用 jQuery，它看起来像这样： $('.btn').on('click', ...);

但是，如何使用 Angular 9 来实现这一点？

Answer 1

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

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>