在Angular2（Typescript）中实现动态路由

Question

RouteConfig 类可用于装饰具有路由功能的组件（@RouteConfig），它具有为该组件定义的某些路由定义。现在，关键是在运行时（动态地）注入这些路由定义。

原因是，假设我有一个应用程序，其中我必须显示（UI）和定义（装饰）“n”个路由，每个路由对应于加载应用程序的帐户以及相应的权限与该特定帐户相关联。因此，在装饰器 @RouteConfig 中为组件预定义路由定义没有任何意义。

我的方法是在每次加载新帐户时进行服务调用。并仅检索关联的路由并在运行时注入它们，以便导航到与该帐户的 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();
    }
}

在上面的代码 sn-p 中，假设我希望加载与登录到我的应用程序的卖家帐户相对应的卖家仪表板。现在，显示销售点仪表板或与卖家无关的任何内容（在我们的例子中，卖家的库存仪表板与卖家相关）没有任何意义。

简而言之，只注入那些需要的路由，而不是在同一个地方配置所有路由。

编辑 1：

这个问题有一个简单的用例或场景，而不是在这篇文章中标记的重复项（后来被问到）。这篇文章中提到的答案有更简单的方法，也更直观。

Answer 1

查看这篇文章：

http://blog.mgechev.com/2015/12/30/angular2-router-dynamic-route-config-definition-creation/

基本上，作者创建了一个类DynamicRouteConfigurator，它使用Reflect API 动态地将路由添加到@RouteConfig 装饰器。

Github 链接：

https://github.com/mgechev/dynamic-route-creator/blob/master/app/components/app/app.ts