如何渲染存储在字符串变量中的Angular动态代码？

问题核心在于DOM Sanitizer仅负责标记HTML安全，无法解析Angular的模板语法（指令、插值、事件绑定）——这些语法需要Angular编译器在构建/运行阶段处理，纯静态HTML渲染做不到。下面是可行的解决方案：

解决方案：动态组件编译 #

通过Angular的ComponentFactoryResolver和Compiler API，动态编译字符串模板为Angular组件，从而解析所有模板语法。

1. 创建动态模板服务 #

import { Injectable, ComponentFactoryResolver, Compiler, ViewContainerRef, Component, NgModule } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class DynamicTemplateService {
  constructor(
    private compiler: Compiler,
    private componentFactoryResolver: ComponentFactoryResolver
  ) {}

  async renderTemplate(
    template: string,
    context: any,
    container: ViewContainerRef
  ) {
    // 清空容器
    container.clear();

    // 创建临时组件类
    @Component({ template })
    class DynamicComponent {}

    // 创建临时模块
    @NgModule({ declarations: [DynamicComponent] })
    class DynamicModule {}

    // 编译模块
    const moduleFactory = await this.compiler.compileModuleAsync(DynamicModule);
    const componentFactory = moduleFactory.componentFactoryResolver.resolveComponentFactory(DynamicComponent);

    // 创建组件实例并绑定上下文
    const componentRef = container.createComponent(componentFactory);
    Object.assign(componentRef.instance, context);
    componentRef.changeDetectorRef.detectChanges();

    return componentRef;
  }
}

2. 在宿主组件中使用服务 #

import { Component, ViewChild, ViewContainerRef } from '@angular/core';
import { DynamicTemplateService } from './dynamic-template.service';

@Component({
  selector: 'app-host',
  template: `<div #templateContainer></div>`
})
export class HostComponent {
  @ViewChild('templateContainer', { read: ViewContainerRef }) container!: ViewContainerRef;
  csmPage = {
    buttons: [
      { name: '提交', id: 1 },
      { name: '取消', id: 2 }
    ]
  };

  constructor(private dynamicTemplateService: DynamicTemplateService) {}

  async ngAfterViewInit() {
    // 先处理模板字符串的转义（将HTML实体转回原始字符）
    const rawTemplate = `["Hello, How are you 

&lt;div *ngIf=&quot;csmPage?.buttons?.length &gt; 0&quot; class=&quot;button-container&quot;&gt;
         
 &lt;div *ngFor=&quot;let button of csmPage.buttons&quot;&gt;

            &lt;button class=&quot;action-button&quot; (click)=&quot;onButtonClick(button)&quot;&gt;
              {{ button.name }}

            &lt;/button&gt;

          &lt;/div&gt;

        &lt;/div&gt;"]`;
    
    // 提取并转义模板内容
    const template = rawTemplate
      .replace(/^\["/, '')
      .replace(/"]$/, '')
      .replace(/&lt;/g, '<')
      .replace(/&gt;/g, '>')
      .replace(/&quot;/g, '"');

    // 渲染模板并传入上下文数据与事件方法
    await this.dynamicTemplateService.renderTemplate(template, {
      csmPage: this.csmPage,
      onButtonClick: (button: any) => {
        console.log('按钮触发', button);
        // 这里写你的点击逻辑
      }
    }, this.container);
  }
}

3. 关键注意事项 #

• 必须先处理模板字符串中的HTML实体（如<转<），否则编译器无法识别Angular语法。
• 动态组件的样式需要全局定义，或在模板中使用内联样式，因为动态组件不属于宿主组件的样式作用域。
• Angular 9+的Ivy编译模式下无需额外配置，旧版本可能需要调整编译选项以支持动态编译。

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