在我们的
一旦用户选择了合同,我们就会触发
实际上,这很简单:
但是在子路由中,它无法工作,例如对于此路由:
上面的路由给了我以下URL:
...这是下拉列表的
Angular 4应用
中,我们有一个下拉列表,其中包含合同列表。一旦用户选择了合同,我们就会触发
router.navigate
,将选定的contractId
更改为url,并进行http请求
。实际上,这很简单:
this.activatedRoute.paramMap.subscribe(...使用contractId进行请求...)
这对于平面路由非常有效。但是在子路由中,它无法工作,例如对于此路由:
export const customerRoutes: Routes = [
{
path: ":contractId/Customers",
component: CustomersComponent,
children: [
{ path: "", redirectTo: "Children", pathMatch: "full" },
{ path: "Children", component: ChildrenComponent }
]
}
];
上面的路由给了我以下URL:
http://localhost:4033/20917/Customers/Children
现在假设我想在下拉列表中选择一个新合同......这是下拉列表的
onChange
事件:public onChange(contract: Contract): void {
this.router.navigate([contract.id, window.location.pathname.split("/")[3]]);
}
当我使用window.location.pathname.split("/")[3]
时,返回结果为:Customers
但是,URL已更改为http://localhost:4033/33444/Customers/Children
,但订阅并未被触发。为什么?
this.activatedRoute.paramMap.subscribe(...request with contractId...)
在哪里?它只会捕捉与组件相关的路由更改。因此,要捕捉到Children
路由的更改,这段代码需要在Children
组件中。那么它是在那里吗? - DeborahKthis.activatedRoute.parent.paramMap...
然后它就可以工作了。我会发布一个带有指向plunker的链接的答案。 - DAGAngular Routing
课程中,我确实讨论了激活路由的.parent属性,但是与观察数据属性有关。这在概念上是类似的。 - DeborahK