Angular 12中动态HTML的点击事件绑定失效问题

问题根源 #

• ngAfterViewInit执行时机早于API请求返回，此时动态HTML尚未渲染，querySelector无法找到目标按钮。
• Angular的[innerHTML]仅渲染HTML结构，不会解析或绑定其中的事件；动态生成的DOM元素不在Angular模板引用追踪范围内，因此@ViewChildren无法获取。

方案一：事件委托（推荐） #

利用事件冒泡原理，在组件根元素上监听点击事件，判断点击目标是否为动态生成的按钮，无需关注按钮渲染时机。

修改TypeScript代码：

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

export class AddSectionComponent implements OnInit, AfterViewInit, OnDestroy {
  sectionList: any = [];
  private clickListener: () => void;

  constructor(
    private elRef: ElementRef,
    private _httpService: CommonService,
    private sanitized: DomSanitizer,
    private renderer: Renderer2
  ) {}

  ngOnInit(): void {
    this.getSectionList();
  }

  ngAfterViewInit() {
    // 给组件根元素绑定点击事件监听
    this.clickListener = this.renderer.listen(
      this.elRef.nativeElement,
      'click',
      (event) => {
        // 通过类名判断点击目标是否为动态按钮
        if (event.target.classList.contains('btn-primary')) {
          this.bindMethod();
        }
      }
    );
  }

  ngOnDestroy() {
    // 组件销毁时移除监听，避免内存泄漏
    this.clickListener?.();
  }

  bindMethod() {
    console.log('clicked');
  }

  sanitizeHtml(value: string): SafeHtml {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }

  getSectionList() {
    this._httpService.get('/Section/GetSectionList').subscribe((res) => {
      if (res) {
        this.sectionList = res.json();
      }
    });
  }
}

方案二：动态内容渲染后手动绑定事件 #

在API请求返回并更新sectionList后，触发Angular视图更新，再手动查找元素绑定事件。

修改TypeScript代码：

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

export class AddSectionComponent implements OnInit {
  sectionList: any = [];

  constructor(
    private elRef: ElementRef,
    private _httpService: CommonService,
    private sanitized: DomSanitizer,
    private cdr: ChangeDetectorRef
  ) {}

  ngOnInit(): void {
    this.getSectionList();
  }

  bindMethod() {
    console.log('clicked');
  }

  sanitizeHtml(value: string): SafeHtml {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }

  getSectionList() {
    this._httpService.get('/Section/GetSectionList').subscribe((res) => {
      if (res) {
        this.sectionList = res.json();
        // 强制Angular更新视图
        this.cdr.detectChanges();
        // 视图更新后查找所有目标按钮并绑定事件
        const buttons = this.elRef.nativeElement.querySelectorAll('button.btn-primary');
        buttons.forEach((btn: HTMLElement) => {
          btn.addEventListener('click', this.bindMethod.bind(this));
        });
      }
    });
  }
}

注意：若sectionList会多次更新，需先移除旧事件监听，防止重复绑定。

方案三：转为Angular组件（复杂场景适用） #

如果动态HTML结构相对固定，可将其封装为独立Angular组件，通过ComponentFactoryResolver动态创建并挂载，直接使用Angular原生事件绑定语法。

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