在angularJS中,当使用UI-Router时,您实际上能够命名路由,因为每个州都有一个名称,并且您可以导航到该路由。
例如:$stateProvider.state("base", { url: "/", controller: "baseController" });
,然后要导航到该路由,您可以执行以下操作:$state.go("base");
我正在尝试用ActivatedRoute.在angular v5.2中做同样的事情。
我所在的组件有一个路由:base/:acctId/:session/upsells/:id/:type
我想导航到base/:acctId/:session/config/:id/:type
我想向ActivatedRoute添加一个动态段,它将填充config/:id
,这样当我使用路由器导航时,就可以附加:type
。
因此,在向ActivatedRoute添加几个段并调用:this.router.navigate([type], { relativeTo: this.activatedRoute }
之后,我想从我所在的组件(base/:acctId/:session/upsells/:id/:type
)导航到另一个路由
文档中没有太多关于修改ActivatedRoute的内容,我也尝试过修改参数,但似乎路由器并没有使用参数来导航。我尝试过做一些类似于Viktor Savkin's comment on this github issue的事情,但是我还是不确定Router.navigate函数的行为。
我已经使用this.router.createUrlTree(['./config', configId, idd], { relativeTo: this.route.parent})
生成了我所需要的url树,但问题是this.router.navigate函数接受一个ActivatedRoute对象作为导航对象,而不是UrlTree对象。是否有从url树创建ActivatedRoute对象的映射?
我的路由器配置如下所示:
const routes: Routes = [
{
path: "base/:acctId/:session",
children: [
{
path: "config/:configid/:idd",
component: ListViewItemDetailComponent,
children: [
{
path: "type1", <----- i want to get here
component: type1Component
},
{
path: "type2",
component: type2Component
},
{
path: "type3",
component: type3Component
}
]
},
{
path: "upsells/:id/:type", <------ I am here
component: UpsellsComponent
}
]
}
]
如果有任何不合理的地方,请告诉我,并感谢您的宝贵时间。
发布于 2018-06-02 05:31:53
检查此stackblitz POC,其中我添加了相同的路由配置。
基本上,我使用了以下路由逻辑来路由到指定的type1
路由-
this._router.navigate(['./config/1/2/type1'], {
relativeTo: this._ActivatedRoute.parent
});
this._ActivatedRoute.parent
到达父路由即。base/:acctId/:session
&然后给出到达type1
的相对路径。./config/1/2/type1
我希望这能帮到你。
https://stackoverflow.com/questions/50650839
复制相似问题