1

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?

domip
  • 11
  • 1
  • ActivationEnd seems to be called from the end of the URL segments to the root for each segment separately, so all params are available only in the first call..currently solving the issue to filter out only the full URL event – Dominik Brázdil Mar 25 '22 at 08:53

0 Answers0