Angular 有棱角的仅绑定事件一次（在第一次初始化时）

假设我想在用户每次单击

标记时提醒他

document.querySelector('body').addEventListener('click', function (event : any) {
            if (event.target.tagName === 'A') {
                event.preventDefault();
                alert('Congratulations! A tag clicked!!!');
            }
        });

如果我将此绑定放在

构造函数中（在
ngOnInit（）
中），每次转到此组件（路由器链接）时，我都会有新绑定（和一个以上警报）。

在第一次初始化时只绑定一次的方法是什么

同时，我在
ngondstroy（）
中使用
removeEventListener（）
。看起来很难看。还有更好的吗？
似乎需要检查元素上是否已经存在所需的事件侦听器。请参阅：

基于此，我建议使用类似的方法（至少对我有效）：

如果需要像示例中那样将事件侦听器绑定到整个主体，可以使用静态变量。只需在组件的开头创建一个，并在绑定事件侦听器之前检查它的值。例如：

export class CongratulationsComponent implements OnInit {
  static flag = true;
  constructor() {}

  ngOnInit() {
    if (CongratulationsComponent.flag) {
      document.querySelector('body').addEventListener('click', function (event: any) {
        if (event.target.tagName === 'A') {
          event.preventDefault();
          alert('Congratulations! A tag clicked!!!');
        }
      });
      CongratulationsComponent.flag = false;
    }
  }
}

export class CongratulationsComponent implements OnInit {
  static flag = true;
  constructor() {}

  ngOnInit() {
    if (CongratulationsComponent.flag) {
      document.querySelector('body').addEventListener('click', function (event: any) {
        if (event.target.tagName === 'A') {
          event.preventDefault();
          alert('Congratulations! A tag clicked!!!');
        }
      });
      CongratulationsComponent.flag = false;
    }
  }
}