Can we add a function to ActivatedRoute to offer a merged params map of all params on the url tree #64484
Description
Which @angular/* package(s) are relevant/related to the feature request?
Angular Router
Description
I am trying to easily extract a :groupId from my activatedRoute. The url could be http://apollo-native-tv:4205/admin/groups/ef01886a-167c-4b57-82ed-000f805a73e0/photos .
When I use ActivatedRoute on the photo component, I have to traverse 4 or 5 levels down into nested router-outlets to find my :groupId.
Proposed solution
Add a function that returns a merged params map from the whole URL trees root to the current activated outlet so I dont have to traverse the tree finding the param.
private getLeafRoute(): ActivatedRouteSnapshot {
let route = this.activeRouted.root;
while (route.firstChild) {
route = route.firstChild;
}
return route.snapshot;
}
// Usage
const groupId = this.getLeafRoute().params['groupId'];
The router.currentNavigation() signal is something that could possible adds a merged map of all Params from tree up to the leaf?
Alternatives considered
I could subscribe to Router Events and get the :groupId but I find that Router events emits a lot of noisy and I am not sure if that is causing more overhead. I prefer to limit subscriber, I guess.
groupId$ = this.router.events.pipe(
filter(event => event instanceof NavigationEnd),
map(() => {
let route = this.router.routerState.root;
while (route.firstChild) {
route = route.firstChild;
}
return route.snapshot.params['groupId'];
}),
filter(Boolean)
);