如何在Angular中程序化实例化组件并插入模板指定位置？

你遇到的Cannot read property 'createComponent' of undefined错误，核心原因是**#inner这个ng-template是定义在未实例化的#paneTemplate内部的**——在你调用createEmbeddedView之前，模板里的元素还没有被渲染到DOM中，所以通过@ViewChild('inner')根本获取不到对应的ViewContainerRef，自然会返回undefined。

下面是修正后的实现方案，同时满足「将组件注入窗口模板指定位置」「插入主容器」「保留窗口引用以便后续移除」三个需求：

修正后的代码实现 #

import { Component, ComponentFactoryResolver, TemplateRef, ViewChild, ViewContainerRef, Type, EmbeddedViewRef } from "@angular/core";

export interface PaneOptions {
  component: Type<any>;
  params?: any;
}

// 定义窗口引用类型，方便后续管理（比如移除）
export interface WindowRef {
  embeddedView: EmbeddedViewRef<any>;
  componentInstance: any;
}

@Component({
  selector: 'app-manager',
  template: `
    <ng-template #paneContainer></ng-template>

    <!-- 窗口模板 -->
    <ng-template #paneTemplate>
      <div style="background: red; margin: 10px; padding: 10px;">
        <h3>Window header</h3>
        <!-- 这个是组件要插入的位置 -->
        <ng-template #paneBody></ng-template>
      </div>
    </ng-template>
  `
})
export class ManagerComponent {
  @ViewChild('paneContainer', { read: ViewContainerRef }) paneContainer: ViewContainerRef;
  @ViewChild('paneTemplate', { read: TemplateRef }) paneTemplate: TemplateRef<any>;
  
  // 保存所有窗口的引用，用于后续移除
  private windowRefs: WindowRef[] = [];

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  addPane(options: PaneOptions): WindowRef {
    // 1. 先创建窗口模板的嵌入视图，插入到主容器
    const embeddedView = this.paneContainer.createEmbeddedView(this.paneTemplate);
    
    // 2. 从嵌入视图的引用中获取内部的paneBody容器（关键步骤！）
    const paneBodyRef = embeddedView.references['paneBody'] as ViewContainerRef;

    // 3. 解析要插入的组件，创建实例并传入参数
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(options.component);
    const componentRef = paneBodyRef.createComponent(componentFactory);
    Object.assign(componentRef.instance, options.params);

    // 4. 保存当前窗口的引用，方便后续移除
    const windowRef: WindowRef = {
      embeddedView,
      componentInstance: componentRef.instance
    };
    this.windowRefs.push(windowRef);

    return windowRef;
  }

  // 移除指定窗口的方法示例
  removeWindow(windowRef: WindowRef): void {
    const index = this.windowRefs.indexOf(windowRef);
    if (index !== -1) {
      // 销毁组件实例
      const componentRef = this.paneContainer.get(index);
      if (componentRef) {
        componentRef.destroy();
      }
      // 销毁嵌入视图
      windowRef.embeddedView.destroy();
      // 从引用数组中移除
      this.windowRefs.splice(index, 1);
    }
  }

  // 移除所有窗口的方法示例
  removeAllWindows(): void {
    this.windowRefs.forEach(ref => {
      ref.embeddedView.destroy();
    });
    this.windowRefs = [];
    this.paneContainer.clear();
  }
}

关键修正点说明 #

• 先实例化模板，再获取内部容器：必须先调用createEmbeddedView创建窗口模板的实例，然后从这个实例的references属性中获取内部的#paneBody对应的ViewContainerRef——模板只有实例化后，内部的变量才会被注册到嵌入视图的引用中。
• 保存窗口引用：通过自定义的WindowRef类型，把嵌入视图和组件实例都保存起来，后续移除时可以直接调用destroy()方法销毁视图和组件，同时从数组中清理引用。
• 组件参数传递：通过Object.assign把options.params赋值给组件实例，确保组件能接收到传入的参数。

额外优化提示 #

如果你的Angular版本是9及以上，推荐使用ViewContainerRef.createComponent的简化写法（不需要ComponentFactoryResolver），代码会更简洁：

// 替代原来的组件解析代码
const componentRef = paneBodyRef.createComponent(options.component);

同时要确保你要插入的组件已经在模块的declarations（Angular 9+无需entryComponents）中注册，否则会报错。

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