动态创建的元素上的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之间的区别