Angular 4 subscribe of paramMap not working with children outlet

Question

In our Angular 4 App we have DropDown with a list of contracts.

Once the user selects a contract we trigger a router.navigate, changing the url with the selected contractId and we make a http request with it.

Actually it's pretty simple:

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

This works fine with flat routes.

But on routes with children it's not working, for example for this route:

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

The route above gives me the following URL: http://localhost:4033/20917/Customers/Children

Now let's assume I want to select in DropDown a new contract...

...that is the onChange of the DropDown:

public onChange(contract: Contract): void {
  this.router.navigate([contract.id, window.location.pathname.split("/")[3]]);
}

Where window.location.pathname.split("/")[3] gives me: Customers

The url changed to http://localhost:4033/33444/Customers/Children, BUT the subscribe has not been hit. Why?

Answer 1

For me neither activatedRoute.parent.parentMap nor activatedRoute.parentMap works. After some trials and errors I came up with following solution:

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

This finally shows me all parameters. It obviously should be debounced, because router emits a lot of events, but this is the best I could find.

I am using Angular 11.