使用Angular 4.1.3,我正在开发一个地图应用程序,其中懒加载各种工具模块。目前,有一个路由出口,将工具放置在地图中。但是,我需要支持将工具放置在新标签页中,靠近地图。该选项卡是动态创建的,响应加载工具模块,并且可以同时打开多个选项卡。
创建选项卡组件非常简单,似乎在新选项卡中放置动态组件加载器(https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html)是一种合理的方法来放置工具在选项卡中。然而,我不知道如何实际获取对工具组件的引用,以将其传递给加载器,因为它是懒加载模块的一部分。是否有一种方法让路由器将其传递给我的app.component而不是通过router-outlet输出它?我考虑过将路由器出口放在隐藏的div中,然后在控制器中绑定到它,但那似乎很麻烦,而且我不确定它是否有效。
我看到了一些类似的问题/答案似乎依赖于SystemJS,但我正在使用Webpack。
我认为我需要的是路由器给我模块或其组件的引用。
创建选项卡组件非常简单,似乎在新选项卡中放置动态组件加载器(https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html)是一种合理的方法来放置工具在选项卡中。然而,我不知道如何实际获取对工具组件的引用,以将其传递给加载器,因为它是懒加载模块的一部分。是否有一种方法让路由器将其传递给我的app.component而不是通过router-outlet输出它?我考虑过将路由器出口放在隐藏的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 {
}
}
在content-pane.module的entryComponents中必须包含在tab1中指定的组件:entryComponents: [htmlPaneComponent]
最终,我希望在惰性加载模块时创建新的CompItem()
。当我激活一个路由时,例如:
{
path: 'search', loadChildren:
'components/conference-room-search/conference-room-search.module#ConferenceRoomSearchModule'
}
我认为我需要的是路由器给我模块或其组件的引用。