角。仅绑定一次事件（在第一次初始化时）

Posted 2023-03-13

【中文标题】角。仅绑定一次事件（在第一次初始化时）

【英文标题】：Angular. Bind event only one time (on first init)

【发布时间】：2018-06-06 22:02:31

【问题描述】：

假设我想在用户每次点击<a> 标签时提醒他。

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

如果我将此绑定放入constructor（在ngOnInit() 中打开），每次我访问此组件（路由器链接）时，我都会有新的绑定（以及更多警报）。 在第一次初始化时只绑定一次的方法是什么？

与此同时，我在ngOnDestroy() 中使用removeEventListener()。好像很丑。有没有更好的？

【参考方案1】：

您似乎需要检查您的元素上是否已经存在所需的事件侦听器。请参考：How to check whether dynamically attached event listener exists or not?

基于this answer，我建议使用这样的东西（至少对我有用）：

function showAlert(evt) 
  evt.preventDefault();
  alert('Congratulations! A tag clicked!!');


  const aTags = document.querySelectorAll('a');
  for (const i in aTags) 
    const element = aTags[i];
      if (element instanceof Element && element.getAttribute('listener') !== 'true') 
        element.addEventListener('click', showAlert);
        element.setAttribute('listener', 'true');
    
  

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

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;