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

Breadcrumb component doesn't have any URLs registred if it's called from child route #82

Open darkolakovic opened 7 years ago

darkolakovic commented 7 years ago

If breadcrumb component is called from template in child route <breadcrumb></breadcrumb> , where we have defined <router-outlet></router-outlet> it doesn't have any of URLs registred and therefore, breadcrumbs doesn't display anything. However if we navigate somewhere inside application, it's starts working.

For example here is the list of defined routes in application:

const appRoutes: Routes = [
  {path: '', component: HomeComponent, pathMatch: 'full'},
  {
    path: 'services', component: ServicesComponent, children: [
      {path: '', redirectTo: 'electronics', pathMatch: 'full'},
      {path: 'electronics', component: ElectronicsComponent},
      {path: 'fashion', component: FashionComponent}
  ]
  },
  {
    path: 'security', component: SecurityComponent, children: [
      {path: '', redirectTo: 'login', pathMatch: 'full'},
      {path: 'login', component: LoginComponent},
      {path: 'signup', component: SignupComponent}
  ]
  },
];

If we would call a breadcrumb component inside app,component.html, where we have first call of router-outlet everything will work:

<breadcrumb></breadcrumb>
<router-outlet></router-outlet>

However if we would make same call inside ServicesComponent, which is child route which has registred other children routes, described issue will appear.

Why I would like to call it inside child components and not from the root direclty, is because I want to have breadcrumbs displaying it only there on Services components. Calling hideRoute(route: string) function from breadCrumbService can't help in this case since security pages have completely different HTML then services pages.