Angular 14如何在动态HTML中创建动态组件？

你之前的方法行不通，核心原因是@ViewChild只能识别组件编译阶段就存在于模板中的元素——通过innerHTML动态插入的模板变量，不会被Angular的AOT编译流程解析，自然拿不到对应的ViewContainerRef。下面给你两种可行的替代方案：

方案1：手动定位容器并挂载组件 #

不用依赖模板变量，直接通过原生DOM找到目标位置，再手动创建组件挂载上去：

import { Component, ElementRef, AfterViewInit, ComponentFactoryResolver, Injector } from '@angular/core';
import { MyInputComponent } from './my-input.component';

@Component({
    selector: 'mathstuff',
    template: ``
})
export class DynComponent implements AfterViewInit {
    constructor(
        private elementRef: ElementRef,
        private cfr: ComponentFactoryResolver,
        private injector: Injector
    ) {}

    ngAfterViewInit(): void {
        // 生成带唯一ID容器的MathML内容，把要插入组件的位置换成带ID的div
        const mathMLContent = `
            <math>
                <mrow>
                    <span>x = </span>
                    <div id="input-host"></div>
                </mrow>
            </math>
        `;
        this.elementRef.nativeElement.innerHTML = mathMLContent;

        // 定位目标容器元素
        const hostEl = this.elementRef.nativeElement.querySelector('#input-host');
        if (!hostEl) return;

        // 生成组件工厂并创建组件，挂载到目标容器
        const factory = this.cfr.resolveComponentFactory(MyInputComponent);
        const componentRef = factory.create(this.injector, [], hostEl);
        
        // 手动触发组件的变更检测
        componentRef.changeDetectorRef.detectChanges();
    }
}

方案2：用Renderer2创建容器（更符合Angular规范） #

避免直接操作原生DOM，用Angular的Renderer2构建结构并挂载组件：

import { Component, ElementRef, AfterViewInit, Renderer2, Injector, ViewContainerRef } from '@angular/core';
import { MyInputComponent } from './my-input.component';

@Component({
    selector: 'mathstuff',
    template: ``
})
export class DynComponent implements AfterViewInit {
    constructor(
        private elementRef: ElementRef,
        private renderer: Renderer2,
        private injector: Injector,
        private vcRef: ViewContainerRef
    ) {}

    ngAfterViewInit(): void {
        // 构建MathML结构
        const mathEl = this.renderer.createElement('math');
        const mrowEl = this.renderer.createElement('mrow');
        this.renderer.appendChild(mathEl, mrowEl);

        // 添加静态文本内容
        const spanEl = this.renderer.createElement('span');
        this.renderer.appendChild(spanEl, this.renderer.createText('x = '));
        this.renderer.appendChild(mrowEl, spanEl);

        // 创建组件容器
        const hostEl = this.renderer.createElement('div');
        this.renderer.appendChild(mrowEl, hostEl);

        // 把整个MathML结构挂载到组件根元素
        this.renderer.appendChild(this.elementRef.nativeElement, mathEl);

        // 在容器上创建组件（Angular 13+支持直接指定hostElement）
        const componentRef = this.vcRef.createComponent(MyInputComponent, {
            injector: this.injector,
            hostElement: hostEl
        });
        componentRef.changeDetectorRef.detectChanges();
    }
}

关键注意点 #

• 动态创建的组件需手动管理生命周期：组件销毁时记得调用componentRef.destroy()，避免内存泄漏。
• Angular 13+可简化代码：无需依赖ComponentFactoryResolver，直接用ViewContainerRef.createComponent指定hostElement即可。
• 彻底放弃innerHTML+模板变量的思路：AOT编译阶段不会处理动态插入的模板变量，@ViewChild永远无法识别。

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