在 Angular2 中实现动态路由（Typescript）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34842536/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Implementing Dynamic Routing in Angular2 (Typescript)
提问by darkdefender27
RouteConfig class which can be used to decorate a component (@RouteConfig) with routing capabilities has certain route definitions defined for that component. Now, the catch is to have these route definitions injected at runtime (dynamically).
可用于装饰具有路由功能的组件 (@RouteConfig) 的 RouteConfig 类具有为该组件定义的某些路由定义。现在，问题是在运行时（动态）注入这些路由定义。
The reason being, let's say I have an application wherein I have to display (UI) and define (decorate) 'n' number of routes, each which corresponds to the account for which the application is loaded and consequently the rights that are associated with that particular account. Thus, having the route definitions pre-defined in the decorator @RouteConfig for a component doesn't make any sense.
原因是，假设我有一个应用程序，我必须在其中显示（UI）和定义（装饰）“n”个路由，每个路由对应于加载应用程序的帐户，因此与相关联的权限那个特定的帐户。因此，在装饰器 @RouteConfig 中为组件预定义路由定义没有任何意义。
My approach is to make a service call every time a new account is loaded. And retrieve the associated routes only and inject them during runtime so as to navigate to other respective components corresponding to each route displayed in the UI for that account.
我的方法是每次加载新帐户时进行服务调用。并且只检索关联的路由并在运行时注入它们，以便导航到与该帐户的 UI 中显示的每个路由对应的其他相应组件。
import { Summary } from './components/summary';
@RouteConfig([
/*
Let's say we need a seller dashboard to be displayed...
*/
//{ path: 'SellerDashboard', component: SellerDashboard }
{ path: '/', component: Summary }
])
class App {
contactInfo: ContactInfoModel;
public App(dataService: DataService) {
this.model = dataService.getContactInfo();
}
}
In the code snippet above, lets say I wish to load the seller dashboard corresponding to a seller account looged in to my application. Now, it won;t make any sense to display the Point of Sales dashboard or anything thats not relevant to a seller (In our case, seller's inventory dashboard is relevant to a seller).
在上面的代码片段中，假设我希望加载与登录到我的应用程序的卖家帐户相对应的卖家仪表板。现在，显示销售点仪表板或任何与卖家无关的东西没有任何意义（在我们的例子中，卖家的库存仪表板与卖家相关）。
In a gist, injecting only those routes that are required instead of configuring all the routes in the same place.
简而言之，只注入那些需要的路由，而不是在同一位置配置所有路由。
EDIT 1:
编辑 1：
This question has a simple use case or a scenario than the duplicate marked on this post (which was asked afterwards). The answers mentioned in this post have simpler approaches and are far more intuitive, too.
这个问题有一个简单的用例或场景，而不是在这篇文章中标记的副本（后来被问到）。这篇文章中提到的答案有更简单的方法，也更直观。
采纳答案by Ma Jerez
Check this post:
检查这个帖子：
http://blog.mgechev.com/2015/12/30/angular2-router-dynamic-route-config-definition-creation/
http://blog.mgechev.com/2015/12/30/angular2-router-dynamic-route-config-definition-creation/
Basically the author creates a class DynamicRouteConfiguratorthat uses the Reflect API to dynamically add routes to the @RouteConfigdecorator.
基本上，作者创建了一个类DynamicRouteConfigurator，该类使用 Reflect API 向@RouteConfig装饰器动态添加路由。
Github link:
Github 链接：
https://github.com/mgechev/dynamic-route-creator/blob/master/app/components/app/app.ts
https://github.com/mgechev/dynamic-route-creator/blob/master/app/components/app/app.ts
