在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();
    }
}

在上面的代码段中,假设我希望将与卖方帐户对应的卖方信息中心加载到我的应用程序中.现在,它赢得了任何意义:显示销售点仪表板或与卖方无关的任何内容(在我们的案例中,卖方的库存仪表板与卖方相关).

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

编辑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