I build my breadcrumbs based on the current route I am on.
In order to do so, I collect all Url Segments as follows:
export class NavService {
private readonly routeChange?: Subscription;
constructor(private router: Router) {
this.routeChange = router.events
.pipe(filter((event): event is NavigationEnd => event instanceof NavigationEnd))
.subscribe((event) => {
const tree: UrlTree = this.router.parseUrl(event.url);
const urlSegmentGroup: UrlSegmentGroup = tree.root.children[PRIMARY_OUTLET];
this.buildBreadcrumbs(urlSegmentGroup);
});
}
buildBreadcrumbs(urlSegmentGroup: UrlSegmentGroup) {
// some logic to create my breadcrumbs
//PROBLEM: I also need the URL Params
}
}
This works.
However, I additionally also need the Params of the current route I am on. I need this information as I need to know which of the segments are params and which are not (part of my breadcrumb logic).
NavigationEnd
does not provide this information, see https://angular.io/api/router/NavigationEnd.
I have tried to filter ActivationEnd
instead, which provides me with Params
. This works, however the url
provided by ActivationEnd
did not hold all the url segments for some reason.
export class NavService {
private readonly routeChange?: Subscription;
constructor(private router: Router) {
this.routeChange = router.events
.pipe(filter((event): event is ActivationEnd => event instanceof ActivationEnd))
.subscribe((event) => {
this.buildBreadcrumbs(event.snapshot.url, event.snapshot.params)
});
}
private buildBreadcrumbs(urlSegmentGroup: UrlSegment[], params: Params) {
//PROBLEM: urlSegmentGroup sometimes does not hold all URL segments, but misses last part
}
}
So currently if I use NavigationEnd
I do not receive the params
, and when using ActivationEnd
then the url segments are sometimes incomplete.
Any ideas how to receive both?