我想动态调用组件,我有以下代码:
@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;
}
}