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

Question

RouteConfig class 可用于装饰具有路由功能的组件 (@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();
    }
}

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

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

编辑 1：

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

Answer 1

检查这个 post:

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

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

Github link:

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

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

Implementing Dynamic Routing in Angular2 (Typescript)

typescript

angular

angularjs-routing

angular2-routing

angular2-template