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'未加载！

和

NgModule的位置0处的值。DynamicModule的声明不是引用：[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;
  }
}