角度延迟加载动态组件

Question

使用Angular 4.1.3,我正在开发一个延迟加载各种工具模块的地图应用程序.目前,有一个路由器插座,可将工具放置在地图中.但是,我需要支持将工具放在地图旁边的新选项卡中.该选项卡是动态创建的,以响应加载工具模块,并且可以同时打开多个选项卡.

创建选项卡组件很简单,似乎在新选项卡中放置动态组件加载器(https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html),这是合理的将工具放在选项卡中的方法.但是,我不知道如何实际获取对工具组件的引用以将其传递给加载器,因为它是延迟加载模块的一部分.有没有办法让路由器将此传递给我的app.component而不是通过路由器插座输出？我已经考虑过将路由器插座放在一个隐藏的div中,然后在控制器中绑定它,但这看起来很糟糕,我不确定它是否会起作用.

我见过的一些类似的问题/答案似乎依赖于SystemJS,但我正在使用Webpack.

编辑:我在这里运行了一个基本的plunker:http://plnkr.co/edit/RPbyQZ4LyHN9o9ey2MJT？p = preview

那里的代码有一个非常基本的组件动态添加到选项卡

  export class ContentPaneComponent implements OnInit {
  @ViewChild('contentpane') el: ElementRef;

  @Output() newContent: EventEmitter<any> = new EventEmitter();

  private content: string;
  private contentSubscription: Subscription;

  private tab1 = new CompItem(htmlPaneComponent, {});
  // private tab2 = new CompItem(LayerManagerComponent, {});

  ngOnInit(): void {
  }

}

tab1中指定的组件必须包含在content-pane.module的entrycomponents中 entryComponents: [htmlPaneComponent]

最终,我希望CompItem()在模块延迟加载时创建新的.当我激活路线时,例如:

{
    path: 'search', loadChildren:
    'components/conference-room-search/conference-room-search.module#ConferenceRoomSearchModule'
        }

我认为我需要的是路由器给我一个模块或其组件的参考.

Answer 1

这是动态延迟加载组件的策略。但请注意，我还没有尝试过！

通过依赖注入获取NgModuleFactoryLoader实例并异步获取包含您希望延迟加载的组件的模块。由此，获取 anNgModuleFactory然后获取 an NgModuleRef。

将为NgModuleRef您提供：

• aComponentFactoryResolver接受 a Type<T>(来自@angular/core)
• 模块类的instance()。

因此，您无法Type<T>从代码中创建 a 来传递给 ，ComponentFactoryResolver因为您的代码不能依赖于T，但该模块可以访问T并可以提供Type<T>.

使模块实现一个可以返回 a Type<any>（组件类）并转换NgModuleRef.instance()为该接口的接口。然后使用ComponentFactoryResolver. 如果由于某种原因这不起作用，请进行模块调用ComponentFactoryResolver并直接返回组件而不是Type. 一旦你有了一个，ComponentFactory你就可以像平常一样进行动态组件加载。