addEventListerner行為角度不一致7

Question

我使用innerHTML結合創建動態a標簽，如下面的代碼：

<span *ngIf="msg" [innerHTML]="msg | sanitizeHtml"></span>

在.ts中，我嘗試使用addEventListerner添加click事件：

ngAfterViewInit() {
 this.elements = this.elem.nativeElement.querySelectorAll('.tradebtn');
  if (this.elements && this.elements.length > 0) {
    this.elements.forEach((f) => {
      console.log(f)
      f.addEventListener('click', (event) => {
        console.log(event)
      });
    });
   }
}

我得到elements元素列表以添加事件偵聽器。 Click事件偵聽器有時可以運行，但在大多數情況下不起作用。

我對這種行為感到困惑。 我也嘗試將代碼setTimeout()括起來，但是沒有運氣。

Answer 1

您應該使用@HostListener來處理事件。

添加條件event.target.matches('.tradebtn')來檢查元素來源。

@HostListener('document:click', ['$event'])
   onclick(event) {
   if(event.target.matches('.tradebtn')) {
        console.log(event)
   }
}