我正在尝试创建一个模块,它可以动态加载一堆组件,但不会干扰AoT。这是一个挑战,但我已经非常接近了,除了一件事情。如何检索存储在ComponentFactory中的所有组件?
在我的app.module.ts
中,我将一堆组件数组传递给我的动态加载模块的forRoot():
imports: [
DynamicLoadModule.forRoot(dynamicComponents),
]
在我的
dynamic-load.module.ts
文件中,我将所有组件添加到了Angular2的ComponentFactory中:static forRoot(components: any[]) {
return {
ngModule: DynamicLoadModule,
providers: [{
provide: ANALYZE_FOR_ENTRY_COMPONENTS,
useValue: components,
multi: true,
}, {
provide: DynamicLoadService,
useValue: new DynamicLoadService(components)
}]
};
}
现在问题出现在
DynamicLoadService
中,这个服务与AoT冲突。我已经尝试了文档中提到的导出函数的方式,但是这并没有解决问题,因为这种方式我无法将components
作为参数传递给服务。因此,在Angular文档中找到的以下内容并不能解决我的问题:let heroServiceFactory = (logger: Logger, userService: UserService) => {
return new HeroService(logger, userService.user.isAuthorized);
};
export let heroServiceProvider =
{ provide: HeroService,
useFactory: heroServiceFactory,
deps: [Logger, UserService]
};
于是我尝试通过使用OpaqueToken
将组件传递给我的dynamic-load.module
,但这也没有帮助,因为最好情况下我只有未编译的组件,而且我的模块失去了很多灵活性。
所以我得出结论,如果我需要一个包含所有ComponentFactory
中组件的数组,我只需要找到一种检索它们的方法。
现在,我使用ComponentFactoryResolver
根据名称获取一个模板,但我需要获取它们所有的名称,或者至少获取工厂中所有组件的名称。
if (selectedComponent !== '') {
if (typeof this.currentComponent !== 'undefined') { this.currentComponent.destroy(); }
const components = this.dynamicLoadService.getComponents(), // --> instead of getting a list of available components through this service which needs the factory that blocks AoT, I should just be able to retrieve all available components from the ComponentFactory
component: any = components.find((x) => x.name.toLowerCase().indexOf(selectedComponent) > -1),
compFactory = this.cfr.resolveComponentFactory(component);
this.currentComponent = this.vcr.createComponent(compFactory);
this.currentComponent.instance.data = this.componentData;
}