I am currently working on developing a streamlined breadcrumbs path for my application. My goal is to achieve this with the least amount of code possible.
To accomplish this, I have implemented a method of listening to router events and extracting data from the current route snapshot, assuming that each route contains crumb data.
At the moment, I have a functional solution in place that automatically builds the breadcrumb trail.
However, I have encountered an issue where the breadcrumb trail fails to update when the user navigates. I am struggling to determine the direction of the routing (whether it is down the tree or up) in order to properly add or remove items from the breadcrumbs.
I have considered iterating through the entire tree again if the user does not navigate from a parent to a child or vice versa, but I am unsure how to implement this effectively.
For reference, I have provided a simple StackBlitz showcasing the problem:
https://stackblitz.com/edit/angular-ysbzkp?file=src%2Fapp%2Fapp.component.ts
Below is the relevant code snippet for reading the tree:
constructor(
private router: Router,
private route: ActivatedRoute,
) {
this.router.events.pipe(
filter(event => event instanceof ActivationStart),
map((event: ActivationStart) => event.snapshot.data),
map(data => data && data.crumb || undefined),
filter(v => !!v),
).subscribe(crumb => this.crumbs.push(crumb));
}