Question

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

原因是，让我说我有一个应用程序，其中我必须显示（UI）和定义（装饰）＆＃39; n＆＃39;路由数量，每个路由对应于加载应用程序的帐户，以及与该特定帐户关联的权限。因此，在装饰器@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

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

1 个答案: