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

这里是stackblitz

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() {
    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 Fork。

更详细地介绍AfterViewInit，.bind，ElementRef and Renderer

动态创建的元素上的addEventListener不起作用

4 个答案: