Angular 13中如何动态加载泛型类型组件？

你需要通过输入属性传递要动态加载的组件类型——因为TypeScript泛型在运行时会被类型擦除，无法直接从泛型参数T获取组件类型。具体实现步骤如下：

1. 给PopoutComponent添加组件类型输入属性 #

修改你的PopoutComponent，新增一个@Input()属性接收目标组件的Type<T>：

import { Component, OnInit, ViewChild, Type, Input } from '@angular/core';
import { TableHostDirective } from './table-host.directive';
import { PopoutTable } from './popout-table.interface'; // 对应你的基类/接口

@Component({
  selector: 'app-popout',
  template: `
    <div> ...some stuff here... </div>
    <ng-template appTableHost></ng-template>
  `
})
export class PopoutComponent<T extends PopoutTable> implements OnInit {
  @ViewChild(TableHostDirective, { static: true }) tableHost!: TableHostDirective;
  // 新增输入属性，接收要加载的组件类型
  @Input() componentType!: Type<T>;

  ngOnInit(){
    const viewContainerRef = this.tableHost.viewContainerRef;
    viewContainerRef.clear();

    // 使用传入的componentType创建组件
    const componentRef = viewContainerRef.createComponent<T>(this.componentType);
    
    // 可选：给动态组件传递数据
    // componentRef.instance.someProperty = yourData;
  }
}

2. 在父组件中传入具体组件类型 #

在使用app-popout的父组件中，传入你要加载的具体组件（比如UserTableComponent）：

模板直接绑定： #

<!-- 假设UserTableComponent是继承自PopoutTable的目标组件 -->
<app-popout [componentType]="UserTableComponent"></app-popout>

组件类动态设置： #

import { Component } from '@angular/core';
import { UserTableComponent } from './user-table.component';

@Component({
  selector: 'app-parent',
  template: `<app-popout [componentType]="targetComponent"></app-popout>`
})
export class ParentComponent {
  targetComponent = UserTableComponent;
}

3. 确保组件被Angular识别 #

• 若使用NgModule：将动态加载的组件（如UserTableComponent）添加到模块的declarations数组；Angular 9+可省略entryComponents，但低版本需同时添加到该数组。
• 若使用Standalone组件：在PopoutComponent的imports中导入目标组件，或在父组件的providers中通过provideComponent(UserTableComponent)声明。

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