search

gmostert / ng2-breadcrumb

This is an angular 2 component that creates a breadcrumb trail. It hooks into the angular2/router, to dynamically build up the crumb trail once a component is routed to.
MIT License
102 stars 81 forks source link

ng2-breadcrumb use with child route in angular 4 and angular material #74

Open hquangthinh opened 7 years ago

hquangthinh commented 7 years ago

Hi, I'm using ng2-breadcrumb in my angular 4 project with angular material. I configure the children route for some feature modules. The breadcrumb works but there's one issue when I'm in a child route, e.x http://myapp/material/cards When I reload the page at url http://myapp/material/cards the breadcrumb does not render correctly it render as if I'm at the root url.

Does anyone having this same issue? Thank you

nitramau commented 7 years ago

Hi

I think I might have a similar issue with child routes. Since upgrading to Angular 4, the bread crumbs don't always work. If I navigate to http://localhost/abc the breadcrumbs don't show up. But If I then go to http://localhost/abc/def the breadcrumbs do show up. I can then use the breadcrumbs to get back to http://localhost/abc and they will show correctly on that page. I haven't found a solution to this yet.

nitramau commented 7 years ago

I was able to diagnose my problem, and found that the following fix worked for me: In breadcrumb.ts, I added this line to the end of ngOnInit(): this.generateBreadcrumbTrail(this.router.url); The other places that call this.generateBreadcrumbTrail(this.router.url); were not always being called for me. I'd be interested to hear from @gmostert if this change makes sense, and if he'd like it included in the library via a pull request. This link might explain why it is not working anymore: https://github.com/angular/angular/issues/17473 (I am using Angular Animations.)

Bidthedog commented 7 years ago

I get this exact behaviour when using child routes in a shared module - the initial load of any page shows a blank breadcrumb, but any subsequent navigation then shows them up as expected.

gabrielfuller commented 6 years ago

Just like @nitramau I was able to fix this by adding this.generateBreadcrumbTrail(this.router.url); in breadcrumb.ts, at the end of ngOnInit().

Any idea when this will be fixed?

hatemhosny commented 6 years ago

when added this.generateBreadcrumbTrail(this.router.url); in breadcrumb.ts, at the end of ngOnInit() I got duplicate breadcrumbs.

It works fine when I use: this._urls.length = 0; this.generateBreadcrumbTrail(this.router.url);

Liahus1996 commented 6 years ago

Adding this.generateBreadcrumbTrail(this.router.url); still doesnt help for me , is there any other way around ?