Angular AOT模式下，如何运行时动态创建含组件替换的字符串模板组件？

核心原因是你用的ɵcompileComponent是依赖JIT编译器的私有API，而AOT生产构建会彻底移除JIT相关代码，导致报错。要在保留AOT的前提下实现需求，得用Angular官方支持的预编译组件动态插入方案，具体步骤如下：

1. 预编译所有需动态插入的组件 #

所有要替换到模板里的组件（比如CustomDatepickerComponent）必须提前完成AOT编译，不能在运行时动态生成组件类：

• Angular 14+（推荐）：将组件设置为standalone: true，无需在模块中声明。
• Angular <14：把组件添加到对应模块的entryComponents数组中，确保AOT编译时将其纳入。

2. 静态模板渲染+DOM占位替换 #

不要直接编译字符串模板，而是先渲染静态HTML，再找到占位元素替换为预编译组件：

实现示例 #

import { Component, ViewChild, ElementRef, AfterViewInit, ViewContainerRef, Injector } from '@angular/core';
import { CustomDatepickerComponent } from './custom-datepicker.component';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'dynamic-template-renderer',
  template: `<div #hostContainer></div>`
})
export class DynamicTemplateRendererComponent implements AfterViewInit {
  @ViewChild('hostContainer', { read: ElementRef, static: false }) hostEl!: ElementRef;
  @ViewChild('hostContainer', { read: ViewContainerRef, static: false }) viewContainer!: ViewContainerRef;

  // 示例带占位符的模板
  rawTemplate = '<div>请选择日期：<span class="component-placeholder" data-component="datepicker"></span></div>';

  // 占位符与组件的映射表
  componentMap = {
    datepicker: CustomDatepickerComponent
    // 可添加更多组件映射，比如select: CustomSelectComponent
  };

  constructor(
    private sanitizer: DomSanitizer,
    private injector: Injector
  ) {}

  ngAfterViewInit(): void {
    // 处理模板XSS风险（若模板来自用户输入必须做）
    const safeTemplate: SafeHtml = this.sanitizer.bypassSecurityTrustHtml(this.rawTemplate);
    this.hostEl.nativeElement.innerHTML = safeTemplate.changingThisBreaksApplicationSecurity;

    // 遍历所有占位元素并替换
    const placeholders = this.hostEl.nativeElement.querySelectorAll('.component-placeholder');
    placeholders.forEach((placeholder: Element) => {
      const componentKey = placeholder.getAttribute('data-component');
      const targetComponent = this.componentMap[componentKey as keyof typeof this.componentMap];
      
      if (targetComponent) {
        // Angular 13+ 直接创建组件实例
        const componentRef = this.viewContainer.createComponent(targetComponent, {
          injector: this.injector
        });
        // 替换占位元素
        placeholder.replaceWith(componentRef.location.nativeElement);
      }
    });
  }
}

3. 关键注意事项 #

• 避免XSS风险：如果模板内容来自用户输入，必须用DomSanitizer处理后再渲染。
• 组件通信：若需给动态组件传递数据或监听事件，可通过componentRef.instance访问组件实例，设置输入属性或订阅输出事件。
• 生命周期管理：动态创建的组件需在宿主组件销毁时手动销毁，避免内存泄漏，可在ngOnDestroy中调用componentRef.destroy()。

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