Angular运行时如何动态注入含Angular语法的HTML代码到div标签？

由于Angular官方已废弃原Compiler服务，现在可以通过动态创建独立组件+JIT编译的方式实现运行时注入含Angular指令/绑定的HTML模板需求，以下是完整可复用的代码方案：

1. 先配置项目启用JIT编译 #

Angular默认使用AOT编译，动态模板需要JIT支持，修改angular.json的build配置：

"projects": {
  "你的项目名": {
    "architect": {
      "build": {
        "options": {
          "aot": false,
          "buildOptimizer": false
        }
      }
    }
  }
}

同时确保tsconfig.json中compilerOptions.target设为ES2020或更低版本，避免JIT编译报错。

2. 核心组件实现代码 #

在需要注入动态模板的组件中，通过JitCompiler、ViewContainerRef等服务完成编译与挂载：

组件代码 #

import { Component, ViewChild, ViewContainerRef, Injector } from '@angular/core';
import { CommonModule } from '@angular/common';
import { JitCompiler } from '@angular/compiler';

@Component({
  selector: 'app-dynamic-host',
  template: `
    <!-- 用户输入模板的区域 -->
    <textarea [(ngModel)]="userInputTemplate" rows="6" cols="80" placeholder="输入带Angular语法的HTML，比如*ngIf、{{变量}}"></textarea>
    <button (click)="renderDynamicTemplate()">渲染模板</button>
    
    <!-- 动态模板的挂载容器 -->
    <div #dynamicContainer></div>
  `,
  standalone: true,
  imports: [CommonModule]
})
export class DynamicHostComponent {
  @ViewChild('dynamicContainer', { read: ViewContainerRef }) dynamicContainer!: ViewContainerRef;
  // 示例用户输入模板，可替换为实际用户输入内容
  userInputTemplate = '<div *ngIf="isVisible">Hello, {{username}}!</div><button (click)="toggleVisible()">切换显示</button>';

  constructor(
    private compiler: JitCompiler,
    private injector: Injector
  ) {}

  renderDynamicTemplate(): void {
    // 清空容器中已有的动态内容
    this.dynamicContainer.clear();

    // 定义动态组件的上下文类（模板中用到的变量、方法都在这里定义）
    class DynamicComponentClass {
      username = 'Dynamic Angular';
      isVisible = true;

      toggleVisible(): void {
        this.isVisible = !this.isVisible;
      }
    }

    // 编译动态组件并挂载到容器
    this.compiler.compileComponentAsync(DynamicComponentClass, {
      template: this.userInputTemplate,
      standalone: true,
      imports: [CommonModule] // 模板用到的Angular模块都要在这里导入
    }).then(componentFactory => {
      const componentRef = this.dynamicContainer.createComponent(
        componentFactory,
        0,
        this.injector
      );

      // 如果需要给动态组件传递外部数据，直接修改实例属性即可
      // componentRef.instance.username = '外部传入的用户名';
    });
  }
}

3. 关键注意事项 #

• 模板上下文：模板中用到的变量、方法必须在DynamicComponentClass中定义，或者通过componentRef.instance外部赋值。
• 模块依赖：如果模板使用了其他模块（比如FormsModule用于双向绑定），需要在compileComponentAsync的imports数组中添加对应模块。
• 安全风险：用户输入的模板可能包含恶意代码，生产环境必须添加严格的内容校验（比如白名单允许的指令、标签），避免XSS攻击。
• 版本兼容：该方案适用于Angular 14+的独立组件；如果是Angular 14以下版本，需要改用NgModule包裹动态组件，去掉standalone相关配置。

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