breadCrumb

[next summit]

I want to make a dynamic breadcrumb using routing, I want to know what is the best way to do this?

[royal stream]

Hey @next summit 👋 Can you provide more details when you are saying dynamic?

[next summit]

Actually, I want to read my route from the route and have a share component to handle this... I used this method to include the route, but it worked when I changed the url, not when I entered the navigate program. to another page

[royal stream]

You can register to listen for all router events in your shared component using the Router.events observable.

[next summit]

I tried to do this via static param but I don't know if this is a good way or not

[next summit]

I tried this method, but the problem is that it doesn't show the url when the page is refreshed. Is there a way to fix this?

[royal stream]

What do you mean with static param? Can you give an example?

[royal stream]

It really depends on which events you have set it up to listen to. Do you filter out any specific navigation events?

[next summit]

Sure, for example :

export const route = [
{
path:"",
component: HomeComponent,
data: {breadcrumb : "this is home" }
}
]

[next summit]

What I tested was:

this.route.events
.pipe(filter((e: any): e is RouterEvent => e instanceof RouterEvent))
.subscribe((event: RouterEvent) => {
if (event instanceof NavigationEnd) {
console.log(event.url);
}
});

[royal stream]

Yes, the data property in the route configuration object works fine for your use case. However, if you use it, you do not need to subscribe to router events. You can just simply subscribe to the data observable of the ActivatedRoute service inside your shared component 😉

[next summit]

Thank you for sharing your knowledge with me