javascript - 如何使用 Typescript 2.4 的 import() 方法动态获取entryComponents

Question

Typescript 2.4引入了[import()][1]方法来动态加载模块。我正在尝试使用以下提到的过程 https://angular.io/guide/dynamic-component-loader 动态加载组件我们需要在模块中提及 entryComponents 。我可以使用 AppModule 中的 import() 方法动态加载所有组件模块，但无法获取模块的 entryComponents 。例如，我有一个组件及其模块

数据小部件.组件:

@Component({
   selector: 'data-widget',
   templateUrl: 'data-widget.component.html'
   })
   export class DataWidget{}

和数据小部件.module.ts

@NgModule({
  imports: [ ...,
  declarations: [DataWidget],
  exports: [DataWidget],    
  providers:    [],
   entryComponents: [DataWidget]               
})
export class DataWidgetModule {
    constructor(private widgetService: widgetService) {
      widgetService.register('weather', DataWidget);   
    }        
 }

我现在可以通过以下方式使用 import() 方法动态加载该模块

app.module.ts

@NgModule({
  imports: [ ...,
  declarations: [],
  exports: [],    
  providers:    []
 
})
export class AppModule {
    constructor(private apiService: apiService) {
      apiService.getMoudleUrls().subscribe( data=>{
           import(''+data); //e.g './data-widget/data-widget.module'    
      },
      error=>{});
    }        
 }

在AppModule模块中，DataWidgetModule动态加载到Webpack中。现在我正在尝试动态加载DataWidget组件。您可以看到我已使用 widgetService 在 DataWidgetModule 中注册了该组件。但是在模块加载期间没有调用该函数，并且entryComponents也没有加载。因此，当我尝试使用上面提到的以下方式加载组件时

this.componentFactoryResolver.resolveComponentFactory(widgetService.getRegisteredWidget());

然后我收到错误，因为@ngModule中未加载entryComponents。如何加载entryComponents并注册组件以进行动态加载？找到解决方案将非常有帮助。谢谢。

Answer 1

我不知道这是否是正确的主题，但我遇到了类似的问题，并找到了一个有点古怪的解决方案。

问题是我想在父模块内使用新编译模块的入口组件。加载和编译的模块的入口组件仅存在于编译的模块中，因此我必须将它们添加到父模块入口组件中。

只需将入口组件工厂添加到父组件工厂即可。

const resolver = moduleRef.componentFactoryResolver;

resolver._factories.forEach(function (value, key) {
   resolver._parent._factories.set(key, value);
}); 

就我而言，加载的模块中只有几个组件和入口组件，因此将它们与父组件工厂合并没有任何开销。对于较大的加载模块，我认为最好只合并入口组件......