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

Question

RouteConfig类可以用来为组件 (@RouteConfig) 添加路由功能并定义该组件的特定路由定义。现在，关键是要在运行时（动态地）注入这些路由定义。

原因是，假设我有一个应用程序，在其中必须显示 (UI) 和定义 （decorate）‘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：

这个问题有一个比后来标记为重复的帖子更简单的用例或场景。此帖子中提到的答案具有更简单直观的方法。

- darkdefender27

---

可以做到，但没有简单的解决方案。请查看这篇文章，希望能有所帮助... - Sasxa

@Sasxa 非常感谢你的帮助。我根据自己的需求对此进行了一些修改，效果非常好！这篇文章真是太棒了！对我来说简直就是完美的解决方案。 - darkdefender27

Answer 1

请查看这篇文章：

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

基本上，作者创建了一个名为DynamicRouteConfigurator的类，利用反射API动态地向@RouteConfig装饰器添加路由。

Github链接：

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

- Ma Jerez

---

这对我的目的很有帮助。谢谢！ - darkdefender27

RouteRegistry 似乎已经被弃用了。有其他的替代方法吗？ - Gary

看一下这个问题：https://github.com/angular/angular/issues/9527，可能会有帮助。 - teone