angular - Angular如何使用动态模块调用动态组件

Question

我想动态调用组件，我有这个代码：

@NgModule({
  imports: [
    BrowserModule,
    MatButtonModule,
    NgxDatatableModule,
    MatToolbarModule,
    MatButtonModule,
  ],
  declarations: [
    DynamicComponent
  ],
})
class DynamicModule {}

const mod = this.compiler.compileModuleAndAllComponentsSync(DynamicModule);
const factory = mod.componentFactories.find((comp) =>
  comp.componentType === DynamicComponent
);

const componentRef = this.contentContainer.viewContainerRef.createComponent(factory);
(componentRef.instance as SkeletonComponent).data = tab.tabData;

这工作正常。

在这个组件中，我得到一个导入，它有一个标题、一个选项卡数据和一个迭代部分，一个组件。我想要做的是，在上面的代码中，我不调用 DynamicComponent，而是调用tab.component.

一旦我在声明和工厂中更改了 DynamicComponent，我就会遇到以下问题：

错误：Angular JIT 编译失败：'@angular/compiler' 未加载！

和

DynamicModule 的 NgModule.declarations 中位置 0 的值不是引用：[object Object]

77       declarations: [
                       ~
78         tab.component
   ~~~~~~~~~~~~~~~~~~~~~
79       ],

编辑

tab 是一个输入，类型为 Tab

import {Type} from '@angular/core';

export class Tab {
  public id: number;
  public title: string;
  public tabData: any;
  public active: boolean;
  public component: Type<any>;

  constructor(component: Type<any>, title: string, tabData: any) {
    this.tabData = tabData;
    this.component = component;
    this.title = title;
  }
}

标签： angulartypescriptmodulenode-modules