Angular2 RC 和动态路由

Question

我们有一个用 Angular 编写的 SPA 应用程序，它利用动态加载路由（而不是静态定义的路由）。

随着时间的推移，这些动态加载的 UI 组件的数量会越来越多。对于任何给定的客户部署，我们只会使用可能组件的一小部分。在运行时，组件列表将由数据驱动。所以我的愿望是获取该组件列表并执行以下操作： - 在运行时为每个组件定义一个应用程序路由 - 延迟加载该组件

这个问题已经在我们的应用程序的 Angular 1 版本中解决了（使用 ocLazyLoad 包和 angular 的 $stateProvider）

它似乎可以在 Angular2 的一些后期 Beta 版本中解决（使用 AsyncRoutes 和 router.config 方法 - 参见技术 here）

但是在 RC1 中，AsyncRoutes 和 router.config 方法似乎被破坏了。

我在 Angular2 候选版本中找不到关于异步加载 components/routes 的指导。

是否有针对最新候选人执行此操作的规范示例？

Answer 1

在新路由器中(>= RC.3)https://angular.io/docs/ts/latest/api/router/index/Router-interface.html#!#resetConfig-anchorresetConfig可以使用

router.resetConfig([
 { path: 'team/:id', component: TeamCmp, children: [
   { path: 'simple', component: SimpleCmp },
   { path: 'user/:name', component: UserCmp }
 ] }
]);

延迟加载组件现在 (RC.5) 使用延迟模块实现。

https://github.com/angular/angular/issues/11437#issuecomment-245995186 提供了一个 RC.6 Plunker

Answer 2

有了 RC5 ng2 团队终于找到了动态加载路由器的方法 1. AppModule 被引入并且每个都被模块化（回到 AngularJS 1 日期！） 2. "loadChildren" 让你可以从磁盘文件加载:

{path: screenId, loadChildren: 'app/screens/' + screenId + '.module' })

这是我的示例代码： http://plnkr.co/edit/nm5m7N?p=preview

Angular2 RC 和动态路由

Angular2 RC and dynamic routes

angular2-routing

angular