Question

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

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

我见过的一些类似的问题/答案似乎依赖于SystemJS，但我使用的是Webpack。

编辑：我在这里运行了一个基本的弹药：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()。当我激活路线时，例如：

{
    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，但是该模块可以访问{{ 1}}，并可以提供T。

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

角度延迟加载动态组件

1 个答案: