Question

在Angular 4 App我们的DropDown中有一份合约清单。

用户选择合约后，我们会触发router.navigate，使用选定的contractId更改网址，然后我们会使用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

现在让我们假设我想在DropDown中选择一份新合同......

...这是DropDown的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。

Angular 4订阅的paramMap不适用于儿童插座

2 个答案: