11

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

这个问题有一个简单的用例或场景,而不是在这篇文章中标记的副本(后来被问到)。这篇文章中提到的答案有更简单的方法,也更直观。

4

1 回答 1

7

检查这篇文章:

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

于 2016-03-28T17:25:40.767 回答