如何基于泛型参数用ViewContainerRef.createComponent创建弹窗子组件？

错误原因 #

TypeScript的泛型是编译时类型标记，编译后会被完全擦除，运行时不存在T这个值。而ViewContainerRef.createComponent()需要接收的是组件类的实际引用（构造函数），不是类型，所以直接用T会抛出'T' only refers to a type, but is being used as a value here错误。

解决方案 #

要实现基于泛型动态创建子组件，必须将组件类的实际引用传入弹窗组件，而不是仅依赖泛型类型。具体步骤如下：

• 导入Type类型标记组件类引用
• 添加输入属性接收目标组件类
• 使用传入的组件类调用createComponent

修正后的完整代码 #

import { Component, OnInit, ViewContainerRef, ViewChild, Type } from '@angular/core';

// 泛型约束可根据需求调整为更具体的组件基类
export class CustomModal<T extends Component> implements OnInit {
  // 输入属性：接收要动态创建的组件类
  @Input() componentType: Type<T>;

  @ViewChild('container', { read: ViewContainerRef })
  public container: ViewContainerRef;

  ngOnInit(): void {
    // 可在此初始化加载，或按需调用loadComponent
  }

  loadComponent(): void {
    if (!this.componentType) return;

    // 使用传入的组件类创建实例
    const componentRef = this.container.createComponent<T>(this.componentType);
    
    // 如需给子组件传值，通过instance属性访问
    // componentRef.instance.targetProperty = yourValue;
  }
}

使用示例 #

在父组件中调用弹窗时，传入具体的组件类：

import { Component } from '@angular/core';
import { CustomModal } from './custom-modal.component';
import { TargetChildComponent } from './target-child.component';

@Component({
  template: `<app-custom-modal [componentType]="TargetChildComponent"></app-custom-modal>`
})
export class ParentComponent {
  // 将组件类暴露给模板使用
  TargetChildComponent = TargetChildComponent;
}

注意事项 #

• 确保动态创建的组件已在所属模块的declarations数组中声明（Angular 9+ 无需手动添加到entryComponents，框架会自动处理）
• 若需监听子组件事件或调用方法，同样通过componentRef.instance操作

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