動態創建的元素上的addEventListener不起作用

Question

我想向內部html中存在的圖像添加點擊事件。 但是，當我嘗試添加它時，它將無法正常工作。

模板

<div [innerHTML]="myHtml"></div>

碼

myHtml;

ngOnInit() {
    const root = document.createElement('div');
    root.innerHTML = this.getHtml();
    const images = root.getElementsByTagName('img');
    Array.prototype.forEach.call(images, (image: HTMLImageElement, i) => {
      image.addEventListener('click', (event: any) => {
        console.log('click', event);
      });
    });
    this.myHtml = root.innerHTML;
  }

這是堆疊閃電戰

Answer 1

您需要使用ngAfterViewInit（）來實現此目的，我已經修改了代碼並且可以正常工作。

請檢查鏈接https://stackblitz.com/edit/angular-7da7cd

希望這可以幫助。

Answer 2

這可能是由於限制的原因，即在頁面循環開始之前，將僅為元素注冊事件偵聽器。 您是否嘗試過使用Renderer2做更多棱角分明的操作

this.renderer.listen('img', 'click', (evt) => {
  console.log('Clicking the document', evt);
});

文件： https : //angular.io/api/core/Renderer2

Answer 3

它尚未在DOM中。 用ngAfterViewInit做同樣的ngAfterViewInit ：

ngAfterViewInit() {
    const root = document.createElement('div');
    root.innerHTML = this.getHtml();
    const images = root.getElementsByTagName('img');
    Array.prototype.forEach.call(images, (image: HTMLImageElement, i) => {
      image.addEventListener('click', (event: any) => {
        console.log('click', event);
      });
    });
    this.myHtml = root.innerHTML;
  }

Answer 4

您可以使用elementRef來指定<img>元素。 然后，您可以使用以下命令將事件偵聽器添加到所有<img> ：

ngAfterViewInit() {
    var elem = this.elementRef.nativeElement.querySelectorAll('img');
    if (elem) {
      elem.forEach(res => {
        res.addEventListener('click', this.onclick.bind(this));
      })
    }
}

注意：

onclick() {
    alert("Image clicked");
}

是可以自定義的自定義功能。 並且不要忘記import { ElementRef } from '@angular/core';

Stackblitz叉子 。

更多細節到AfterViewInit ， .bind ， ElementRef和Renderer之間的區別