Angular2 RC和动态路线

本文介绍了Angular2 RC和动态路线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我们有一个用Angular编写的SPA应用程序，该应用程序利用动态加载路由(与静态定义的路由相对)的优势.

We have a SPA app written in Angular which takes advantage of loading routes dynamically (as opposed to statically defined routes).

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

Over time, the number of these dynamically loaded UI components will grow and grow. For any given customer deployment, we will only be using a small subset of the possible components. At runtime, the list of components will be data driven. So my desire is to take that list of components and do the following: - define an application route for each component at runtime - lazy load that component

此问题已在我们应用程序的Angular 1版本中解决(使用ocLazyLoad软件包和angular的$ stateProvider)

It’s a problem that has been solved in the Angular 1 version of our application (using ocLazyLoad package and angular’s $stateProvider)

在Angular2的某些更高Beta版本中，它似乎可以解决(使用AsyncRoutes和router.config方法-请参见技术此处)

It appears to be solvable in some of the later Beta releases of Angular2 (using AsyncRoutes and the router.config method - see technique here)

但是在RC1中，AsyncRoutes和router.config方法似乎已损坏.

But in RC1 that AsyncRoutes and router.config method seems to be broken.

关于在Angular2版本候选中异步加载组件/路由的指南，我发现很少.

I can find very little with respect to guidance for loading components/routes asynchronously in the Angular2 release candidates.

是否有针对最新候选人的典型示例?

Is there a canonical example for doing this with the latest candidates?

推荐答案

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

In the new router (>= RC.3) angular.io/docs/ts/latest/api/router/index/Router-interface.html#!#resetConfig-anchor resetConfig can be used

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

现在，使用惰性模块实现了延迟加载组件(RC.5).

Lazy loading components is now (RC.5) implemented using lazy modules.

github/angular/angular/issues/11437# issuecomment-245995186 提供了一个 RC.6 柱塞