角。イベントを1回だけバインドする（最初のinitで）

Question

私が<a>タグをクリックするたびにユーザーに警告したいとします。

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

私は、これは私がこのコンポーネント（ルーターリンク）に行くたびに新しいバインディング（および1つの以上のアラートを）持っています（ngOnInit()中に）constructorに結合置く場合。
最初のinitで一度だけバインドする方法は何ですか？

私はをngOnDestroy()に使用しています。それは醜いようです。もっと良いものはありますか？

Answer 1

希望のイベントリスナーが既に要素に存在するかどうかを確認する必要があるようです。参照してください：私はこのような何かを使用するように助言するthis answerに基づいてHow to check whether dynamically attached event listener exists or not?

（少なくとも私の作品）：

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; 
    } 
    } 
}