Question

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

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

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

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

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

关于在Angular2版本候选版本中异步加载组件/路由的指导，我几乎找不到。

对于最新的候选人，是否有一个典型的例子？

Answer 1

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

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.＆＃34; loadChildren＆＃34;让你可以从磁盘加载文件：

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

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

Angular2 RC和动态路线

2 个答案: