gpt4 book ai didi

typescript - 在 Angular2 中实现动态路由(Typescript)

转载 作者:太空狗 更新时间:2023-10-29 17:10:10 24 4
gpt4 key购买 nike

<分区>

可用于装饰具有路由功能的组件 (@RouteConfig) 的 RouteConfig 类具有为该组件定义的某些路由定义。现在,关键是要在运行时(动态地)注入(inject)这些路由定义。

原因是,假设我有一个应用程序,其中我必须显示 (UI) 并定义(装饰)'n' 个路由,每个路由对应于加载应用程序的帐户,因此对应于与该特定帐户相关联。因此,在组件的装饰器 @RouteConfig 中预先定义路由定义没有任何意义。

我的方法是在每次加载新帐户时调用服务。并仅检索关联的路由并在运行时注入(inject)它们,以便导航到与该帐户的 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();
}
}

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

在要点中,仅注入(inject)那些需要的路由,而不是在同一位置配置所有路由。

编辑 1:

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

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com