Angular 13如何从HTML字符串加载编译动态组件并解析指令？

直接通过innerHTML绑定经过安全处理的HTML字符串，只能渲染静态内容——Angular的结构指令（如*ngFor、*ngIf）和插值表达式需要经过Angular编译器的处理，生成对应的组件视图逻辑才能生效，常规的动态组件传值方式无法触发这个编译流程。以下是可行的解决步骤：

1. 启用项目的JIT编译支持 #

Angular 13默认采用AOT编译，而运行时动态编译依赖JIT模式，需调整项目配置：

• 在angular.json的build配置中，将aot字段设置为false；启动项目时也可直接使用命令ng serve --aot=false。
• 在根模块（如app.module.ts）中导入CompilerModule，确保编译器服务可用：

  import { CompilerModule } from '@angular/compiler';
  
  @NgModule({
    imports: [
      // ...其他模块
      CompilerModule
    ]
  })
  export class AppModule {}
  

2. 实现动态编译渲染方法 #

通过Compiler服务手动编译包含Angular指令的HTML模板，生成动态组件并插入视图容器。核心是要给动态模块导入CommonModule（内置结构指令都定义在此模块中），同时传递模板所需的上下文数据：

import { Compiler, Component, Injector, NgModule, NgModuleRef, ViewContainerRef } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-your-component',
  template: '<div #dynamicContainer></div>'
})
export class YourComponent {
  @ViewChild('dynamicContainer', { read: ViewContainerRef }) vc!: ViewContainerRef;

  constructor(
    private compiler: Compiler,
    private injector: Injector,
    private moduleRef: NgModuleRef<any>
  ) {}

  compileAndRender(html: string, context: Record<string, any> = {}) {
    // 清空容器内已有内容
    this.vc.clear();

    // 创建动态组件
    const DynamicComponent = Component({ template: html })(class {});

    // 创建包含动态组件的模块，必须导入CommonModule
    const DynamicModule = NgModule({
      declarations: [DynamicComponent],
      imports: [CommonModule]
    })(class {});

    // 编译模块并创建组件实例
    this.compiler.compileModuleAndAllComponentsAsync(DynamicModule)
      .then(moduleFactories => {
        const componentFactory = moduleFactories.componentFactories.find(f => f.componentType === DynamicComponent);
        if (componentFactory) {
          const componentRef = this.vc.createComponent(componentFactory, 0, this.injector);
          // 将上下文数据绑定到动态组件实例，供模板使用
          Object.assign(componentRef.instance, context);
        }
      });
  }

  // 调用示例
  renderDynamicContent() {
    const templateStr = `<div>Testing here
      <div *ngFor="let i of items">{{i}}</div>
    </div>`;
    // 传入模板所需的上下文数据
    this.compileAndRender(templateStr, { items: [1, 2, 3, 4] });
  }
}

3. 本地StackBlitz示例报错排查 #

若在线StackBlitz示例正常但本地运行失败，检查以下几点：

• 确认package.json中@angular/compiler依赖版本与其他Angular包一致，若缺失则执行npm install @angular/compiler安装。
• 检查tsconfig.json中compilerOptions.enableIvy是否为true（Angular 13默认启用，若手动关闭需重新开启）。
• 确保根模块已导入CompilerModule，动态模块已导入CommonModule。

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