角延迟加载动态组件

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: [htmlPaneComponent] 的 entrycomponents 中

最终，当模块被延迟加载时，我想创建新的CompItem()s。当我激活如下路线时：

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

我认为我需要路由器给我一个模块或其组件的引用。

Answer 1

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

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

NgModuleRef 会给你：

• 一个ComponentFactoryResolver，它接受一个Type<T>（来自@angular/core）
• 模块类的instance()。

所以你不能从你的代码中创建一个Type<T> 来传递给ComponentFactoryResolver，因为你的代码不能依赖T，但是模块可以访问T并且可以提供一个@ 987654332@.

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