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();
}
}
在上面的代码片段中,假设我希望加载与登录到我的应用程序的卖家帐户相对应的卖家仪表板。现在,显示销售点仪表板或与卖家不相关的任何内容没有任何意义(在我们的例子中,卖家的库存仪表板与卖家相关)。
简而言之,仅注入所需的路由,而不是在同一位置配置所有路由。
EDIT 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
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)