在 Angular2 中实现动态路由(Typescript) [英] Implementing Dynamic Routing in Angular2 (Typescript)

问题描述

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

RouteConfig class which can be used to decorate a component (@RouteConfig) with routing capabilities has certain route definitions defined for that component. Now, the catch is to have these route definitions injected at runtime (dynamically).

原因是，假设我有一个应用程序，我必须在其中显示(UI)和定义(装饰)n"个路由，每个路由对应于加载应用程序的帐户以及相应的权限与该特定帐户相关联.因此，在装饰器 @RouteConfig 中为组件预定义路由定义没有任何意义.

The reason being, let's say I have an application wherein I have to display (UI) and define (decorate) 'n' number of routes, each which corresponds to the account for which the application is loaded and consequently the rights that are associated with that particular account. Thus, having the route definitions pre-defined in the decorator @RouteConfig for a component doesn't make any sense.

我的方法是每次加载新帐户时进行服务调用.并且只检索关联的路由并在运行时注入它们，以便导航到与该帐户的 UI 中显示的每个路由对应的其他相应组件.

My approach is to make a service call every time a new account is loaded. And retrieve the associated routes only and inject them during runtime so as to navigate to other respective components corresponding to each route displayed in the UI for that account.

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

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

In the code snippet above, lets say I wish to load the seller dashboard corresponding to a seller account looged in to my application. Now, it won;t make any sense to display the Point of Sales dashboard or anything thats not relevant to a seller (In our case, seller's inventory dashboard is relevant to a seller).

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

编辑 1:

这个问题有一个简单的用例或场景，而不是这个帖子上标记的重复项(后来被问到).这篇博文中提到的答案有更简单的方法，也更直观.

This question has a simple use case or a scenario than the duplicate marked on this post (which was asked afterwards). The answers mentioned in this post have simpler approaches and are far more intuitive, too.

推荐答案

查看这个帖子:

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

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

Basically the author creates a class DynamicRouteConfigurator that uses the Reflect API to dynamically add routes to the @RouteConfig decorator.

Github 链接:

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

这篇关于在 Angular2 中实现动态路由(Typescript)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！