Angular 12.1用TypeScript动态添加HTML元素绑定(click)事件报错求助

错误原因 #

(click) 是Angular专属的模板绑定语法，仅在Angular编译的模板文件中会被识别处理。你通过原生DOM API创建元素时，调用setAttribute设置(click)属性既无法被Angular解析，浏览器也不识别这类带括号的自定义属性，因此会出现报错、事件无法触发的问题。

快速修复方案 #

直接替换事件绑定逻辑，使用原生addEventListener绑定点击事件即可，注意绑定组件上下文确保可以调用到popUp方法：

export class AppComponent {
    // 你的自定义popUp方法
    popUp(event: Event) {
      console.log('点击事件触发', event);
    }

    createEl(){
      console.time("timer");
      const container = document.getElementById('divEl');
      if (!container) return;
      for (let i = 0; i < 10; i++) {
        let div = document.createElement("div");
        div.textContent = `Hello, World! ${i}`;
        // 替换原有setAttribute逻辑
        div.addEventListener('click', (e) => this.popUp(e));
        container.appendChild(div);
      };
      console.timeEnd("timer");
    }
}

HTML代码无需修改。

Angular规范实现方案（推荐） #

如果希望符合Angular的开发规范，避免直接操作原生DOM适配跨平台场景，可以使用Angular内置的Renderer2服务实现：

import { Component, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private renderer: Renderer2) {}

  popUp(event: Event) {
    console.log('点击事件触发', event);
  }

  createEl(){
    console.time("timer");
    const container = document.getElementById('divEl');
    if (!container) return;
    for (let i = 0; i < 10; i++) {
      const div = this.renderer.createElement('div');
      this.renderer.setProperty(div, 'textContent', `Hello, World! ${i}`);
      // 用renderer绑定点击事件
      this.renderer.listen(div, 'click', (e) => this.popUp(e));
      this.renderer.appendChild(container, div);
    }
    console.timeEnd("timer");
  }
}

内容的提问来源于stack exchange，提问作者Logwin Finserv