hggeorgiev / ng2-breadcrumbs

A breadcrumb service for the Angular 7 router
MIT License
60 stars 35 forks source link

Breadcrumb does not work inside child components #8

Open Bidthedog opened 6 years ago

Bidthedog commented 6 years ago

Angular 4.4.5, angular CLI 1.4.7.

I've just tried to install this component - it seems to work fine when I put it inside app.component.html, but as soon as I try to insert it into any child component, it doesn't show. Routing as follows:

export const APP_ROUTES: Routes = [
  {
    path: '', data: { friendlyName: 'Home', breadcrumb: 'Home' },
    children: [
      { path: '', component: HomeComponent },
      { path: 'about', component: AboutComponent, data: { friendlyName: 'About Us', breadcrumb: 'About' } }
    ]
  }
];

(Using children of the root path may look a bit weird, but I need my routing this way as I query it for my site-map.)

AboutComponent markup as follows:

<div class="container">

  <div class="row">
    <div class="col-lg-12">
      <h1 class="page-header">About Us
        <small class="hidden-xs">Who you're dealing with</small>
      </h1>
      <breadcrumb [allowBootstrap]="true"></breadcrumb>

    </div>
  </div>
</div>

Nothing displays, though the component seems to render (the markup shows when I inspect in the browser, but has no content).

Interestingly, if I put <breadcrumb [allowBootstrap]="true"></breadcrumb> inside app.component.html, but ALSO insert it into a child component, it shows twice (as I would expect). The interesting thing here is that the app.component.html component markup seems to be required before you can use it inside child components:

ng4-bootstrap

app.component.html looks like this:

<breadcrumb [allowBootstrap]="true"></breadcrumb>

<router-outlet></router-outlet>

The use-case for this is that I don't want to show the breadcrumbs on every page - in fact, I want to show them on all pagers except the home page due to the layout I'm using for that page.

Bidthedog commented 6 years ago

FYI I'm working around this by using the following code in app.component.html:

<breadcrumb [allowBootstrap]="true" [hidden]="true"></breadcrumb>

anuragpareek commented 6 years ago

I'm facing the same issue facing Bidthedog. I try to insert it into a child component, But no success, it doesn't work. As I route to any other page; Breadcrumb starts working, showing all paths perfectly. But again when I refresh page breadcrumbs gone. On first they don't get initialize automatically.