Angular中bypassSecurityTrustHtml渲染的(click)事件不触发问题

Angular 不会对通过 [innerHTML] 插入的动态HTML执行编译流程，你在字符串里写的 (click) 是Angular专属模板语法，直接插入DOM后Angular无法识别这个事件绑定，点击自然不会触发对应方法。另外你的代码里还存在方法名不匹配的问题：模板字符串里绑定的是connectWallet()，组件内实际定义的方法是alertWindow()，就算编译生效也会报方法不存在的错误。

方案1：事件委托/原生事件绑定（适配简单动态内容场景，实现成本最低） #

不要在动态插入的HTML字符串里用Angular模板语法，改用原生DOM事件绑定逻辑：

1. 修改renderButton方法，给按钮加唯一标识方便定位，移除无效的Angular事件写法：

renderButton() {
  this.content = this.sanitizer.bypassSecurityTrustHtml(`
    <button id="connectWalletBtn" class="button">
      Connect your wallet
    </button>`);
}

2. 给承载动态内容的DOM容器加模板变量，在视图渲染完成后绑定点击事件：
   app.component.ts 补充相关逻辑：

import { 
  Component, 
  ElementRef, 
  OnInit,
  AfterViewInit,
  ViewChild,
  ViewEncapsulation } from '@angular/core';

import { DomSanitizer, SafeHtml } from "@angular/platform-browser";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.ShadowDom,
})

export class AppComponent implements OnInit, AfterViewInit {

 public content: SafeHtml;
 @ViewChild('dynamicContentContainer') dynamicContainer!: ElementRef<HTMLElement>;

 constructor(private sanitizer: DomSanitizer) {}

 async ngOnInit() { this.renderButton(); }

 ngAfterViewInit() {
  // 给动态渲染的按钮绑定原生点击事件
  this.dynamicContainer.nativeElement
    .querySelector('#connectWalletBtn')
    ?.addEventListener('click', () => this.alertWindow());
 }

 alertWindow() { alert("trigger success"); }

 renderButton() {
  this.content = this.sanitizer.bypassSecurityTrustHtml(`
   <button id="connectWalletBtn" class="button">
    Connect your wallet
   </button>`);      
 }
}

app.component.html 修改为：

<div #dynamicContentContainer [innerHTML]="content"></div>

方案2：动态组件渲染（官方推荐，适配复杂动态内容场景） #

如果动态内容包含大量交互、Angular指令、数据绑定逻辑，不要用[innerHTML]插入，改用Angular提供的动态组件API：

• 提前把要动态渲染的按钮封装为独立Angular组件，把点击逻辑、样式都封装在组件内部
• 通过ViewContainerRef提供的createComponent方法，在需要的位置动态创建按钮组件实例
• 这种方式下Angular会正常执行组件编译流程，所有模板语法、事件绑定、生命周期都能正常生效

核心注意点：Angular的所有模板语法（包括事件绑定()、属性绑定[]、结构指令*ngIf/*ngFor）只会在项目编译阶段，对组件声明的模板文件内容做解析处理，运行时通过innerHTML插入的字符串不会走这个编译流程，写了也不会生效。

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