Angular中innerHTML绑定click调用组件函数失效问题

你遇到的问题核心是：Angular不会编译通过innerHTML插入的内容，所以你写的模板语法(click)='openPopup();'完全不会被识别，自然无法触发组件的openPopup方法。下面是几种可行的解决方式：

方法1：原生DOM事件绑定 #

直接创建DOM元素并通过addEventListener绑定点击事件，用箭头函数确保this指向组件实例：

cellTemplateFunc(cellElement, cellInfo){
  const subContainer = document.createElement('div');
  const link = document.createElement('a');
  link.href = 'javascript:void(0);';
  link.textContent = cellInfo.data.documentNum;
  // 绑定点击事件，箭头函数保留组件上下文
  link.addEventListener('click', () => this.openPopup());
  subContainer.appendChild(link);
  cellElement.append(subContainer);     
} 

openPopup(){  
  console.log("openPopup clicked");
  this.popupVisible = true;
}

方法2：使用Angular Renderer2（推荐） #

Angular推荐用Renderer2操作DOM，避免直接操作原生DOM，更符合框架最佳实践：

首先在组件中注入Renderer2：

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

constructor(private renderer: Renderer2) {}

然后修改cellTemplateFunc：

cellTemplateFunc(cellElement, cellInfo){
  const subContainer = this.renderer.createElement('div');
  const link = this.renderer.createElement('a');
  
  this.renderer.setAttribute(link, 'href', 'javascript:void(0);');
  this.renderer.setProperty(link, 'textContent', cellInfo.data.documentNum);
  // 通过Renderer绑定点击事件
  this.renderer.listen(link, 'click', () => this.openPopup());
  
  this.renderer.appendChild(subContainer, link);
  this.renderer.appendChild(cellElement, subContainer);     
}

原代码不生效的原因 #

Angular的模板编译过程只会处理组件模板中声明的内容，通过innerHTML插入的HTML属于未编译的静态内容，Angular不会解析其中的模板指令（比如(click)），同时出于安全考虑，这类动态插入的事件绑定也会被Angular的安全机制拦截。

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