Angular 4 订阅参数映射不适用于儿童插座

Question

在我们的Angular 4 App中，我们有带有合约列表的下拉列表。

一旦用户选择合同，我们就会触发一个router.navigate，使用所选contractId更改 url，然后我们对其进行http request。

其实很简单：

this.activatedRoute.paramMap.subscribe(...request with contractId...)

这适用于平坦的路线。

但是在有孩子的路线上，它不起作用，例如对于这条路线：

export const customerRoutes: Routes = [
{
path: ":contractId/Customers",
component: CustomersComponent,
children: [
{ path: "", redirectTo: "Children", pathMatch: "full" },
{ path: "Children", component: ChildrenComponent }
]
}
];

上面的路线给了我以下网址：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]给我的地方：客户

网址更改为http://localhost:4033/33444/Customers/Children，但订阅尚未命中。为什么？

Answer 1

要监视父组件的更改事件，我们需要显式调用：

this.activatedRoute.parent.paramMap.subscribe(...request with contractId...)

这不在文档中，我已经为此创建了一个请求：https://github.com/angular/angular/issues/18862

Answer 2

对我来说，activatedRoute.parent.parentMap和activatedRoute.parentMap都不起作用。经过一些试验和错误，我想出了以下解决方案：

const params$ = router.events
.pipe(map(() => _.assign({}, activatedRoute.snapshot.params, activatedRoute.firstChild?.snapshot.params)));

这终于向我显示了所有参数。它显然应该被去抖动，因为路由器会发出很多事件，但这是我能找到的最好的。

我正在使用 Angular 11。