angular 5 have breadcrumb in certain component

Question

in my angular 5 project im trying create breadcrumb for my components i followed this guide https://medium.com/@bo.vandersteene/angular-5-breadcrumb-c225fd9df5cf

by thin breadcrum only show for app-component.html file and it will not show in other component ... i want have beadcrumb in certain component.

like :

export class BreadcrumbComponent implements OnInit {
    breadcrumbs$;
    // Build your breadcrumb starting with the root route of your current activated route
    constructor(private activatedRoute: ActivatedRoute,
                private router: Router) {
       this.breadcrumbs$ = this.router.events
        .filter(event => event instanceof NavigationEnd)
        .distinctUntilChanged()
        .map(event => this.buildBreadCrumb(this.activatedRoute.root));

    }

    ngOnInit() {
    }

    buildBreadCrumb(route: ActivatedRoute, url: string = '',
                    breadcrumbs: Array<BreadCrumb> = []): Array<BreadCrumb> {
        // If no routeConfig is avalailable we are on the root path
        const label = route.routeConfig ? route.routeConfig.data[ 'breadcrumb' ] : 'Home';
        const path = route.routeConfig ? route.routeConfig.path : '';
        // In the routeConfig the complete path is not available,
        // so we rebuild it each time
        const nextUrl = `${url}${path}/`;
        const breadcrumb = {
            label: label,
            url: nextUrl
        };
        const newBreadcrumbs = [ ...breadcrumbs, breadcrumb ];
        if (route.firstChild) {
            // If we are not on our current path yet,
            // there will be more children to look after, to build our breadcumb
            return this.buildBreadCrumb(route.firstChild, nextUrl, newBreadcrumbs);
        }
        return newBreadcrumbs;
    }
}

html:

<ol class="breadcrumb">
  <li *ngFor="let breadcrumb of breadcrumbs$ | async"
      class="breadcrumb-item">
    <a [routerLink]="[breadcrumb.url, breadcrumb.params]">
      {{ breadcrumb.label }}
    </a>
  </li>
</ol>

i moved router event to constructer to detect router change but it still show nothing in other components .. in his code if we move to content component it will show nothing too.

how can i fix this?

Answer 1

This component will only ever work in the app.component, because it is listening to the router events.

Any component created in the app.component's <router-outlet> is created after the navigation is finished. So there are no navigation events that your child component can react to.

I'd advise you to create the breadcrumbs$ stream in the app.component and refactor your breadcrumb component to accept the ActivatedRoute as an @Input().