import { Component , OnInit } from '@angular/core' ; import { Router , ActivatedRoute , NavigationEnd } from '@angular/router' ; import 'rxjs/add/operator/filter' ; @ Component ( { selector : 'layout-breadcrumbs' , template : `
    <ng-template ngFor let-breadcrumb [ngForOf]="breadcrumbs" let-last = last>
        <li class="breadcrumb-item" *ngIf="breadcrumb.label.title" [ngClass]="{active: last}">
        <a *ngIf="!last" [routerLink]="breadcrumb.url">{{breadcrumb.label.title}}</a>
        <span *ngIf="last" [routerLink]="breadcrumb.url">{{breadcrumb.label.title}}</span>
    </ng-template>
    &nbsp;
` , } ) export class BreadcrumbsComponent implements OnInit { breadcrumbs : Array < Object > ; constructor ( private router , private route ) { } ngOnInit ( ) { this . router . events . filter ( event => event instanceof NavigationEnd ) . subscribe ( ( ) => { this . breadcrumbs = [ ] ; let currentRoute = this . route . root , url = '' ; do { let childrenRoutes = currentRoute . children ; currentRoute = null ; childrenRoutes . forEach ( ( route ) => { if ( route . outlet === 'primary' ) { let routeSnapshot = route . snapshot ; url += '/' + routeSnapshot . url . map ( ( segment ) => segment . path ) . join ( '/' ) ; this . breadcrumbs . push ( { label : route . snapshot . data , url : url , } ) ; currentRoute = route ; } } ) ; } while ( currentRoute ) ; } ) ; } }