如何在Angular组件中渲染带事件处理的HTML内容？

直接使用innerHTML指令仅能渲染HTML结构，但Angular不会编译其中的模板语法（如(click)事件绑定），因此无法触发组件内的foo()方法。以下是两种可行的实现方式：

方法一：动态创建组件（符合Angular规范，推荐） #

通过动态组件让Angular完整处理模板逻辑，确保事件绑定生效：

import { Component, Input, ViewChild, ViewContainerRef, ComponentRef, OnInit, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';

// 定义动态组件承载HTML内容
@Component({
  standalone: true,
  imports: [CommonModule],
  template: `<ng-container [innerHTML]="htmlContent"></ng-container>`,
})
class DynamicHtmlComponent {
  @Input() htmlContent!: string;
  @Input() parentInstance!: App;

  ngAfterViewInit() {
    // 绑定按钮点击事件到父组件的foo方法
    const button = document.querySelector('button');
    button?.addEventListener('click', () => this.parentInstance.foo());
  }
}

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule],
  template: `<ng-template #dynamicHost></ng-template>`,
})
export class App implements OnInit, OnDestroy {
  name = 'Angular';
  @ViewChild('dynamicHost', { read: ViewContainerRef }) dynamicHost!: ViewContainerRef;
  private dynamicComponentRef?: ComponentRef<DynamicHtmlComponent>;

  ngOnInit() {
    const htmlString = `
      <div>
        <button>触发foo()</button>
      </div>
      <span>其他内容...</span>
    `;

    // 创建并挂载动态组件
    this.dynamicComponentRef = this.dynamicHost.createComponent(DynamicHtmlComponent);
    this.dynamicComponentRef.instance.htmlContent = htmlString;
    this.dynamicComponentRef.instance.parentInstance = this;
  }

  foo() {
    console.log('Inside foo!');
  }

  ngOnDestroy() {
    // 销毁动态组件避免内存泄漏
    this.dynamicComponentRef?.destroy();
  }
}

说明 #

• 动态组件通过innerHTML渲染HTML，在视图初始化后手动查询DOM元素，将点击事件绑定到父组件的方法。
• 必须在组件销毁时清理动态组件，防止内存泄漏。

方法二：手动渲染并绑定事件（适合简单场景） #

若HTML结构简单，可直接渲染后通过原生DOM API绑定事件：

import { Component, ElementRef, ViewChild, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule],
  template: `<div #htmlContainer></div>`,
})
export class App implements OnInit {
  name = 'Angular';
  @ViewChild('htmlContainer') htmlContainer!: ElementRef<HTMLDivElement>;
  private safeHtml!: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {
    const htmlString = `
      <div>
        <button>触发foo()</button>
      </div>
      <span>其他内容...</span>
    `;

    // 安全处理HTML（防止XSS，若内容可信可省略）
    this.safeHtml = this.sanitizer.bypassSecurityTrustHtml(htmlString);
    this.htmlContainer.nativeElement.innerHTML = this.safeHtml.toString();

    // 绑定按钮点击事件
    const button = this.htmlContainer.nativeElement.querySelector('button');
    button?.addEventListener('click', () => this.foo());
  }

  foo() {
    console.log('Inside foo!');
  }
}

说明 #

• 直接将HTML插入指定容器，通过querySelector找到按钮后绑定点击事件到组件方法。
• 若HTML来自不可信源，必须用DomSanitizer处理，避免XSS攻击。

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