/**
 *  reference: http://brianflove.com/2016/10/23/angular2-breadcrumb-using-router/
 **/ import { Component , OnInit } from "@angular/core" ; import { Router , ActivatedRoute , NavigationEnd , Params , PRIMARY_OUTLET } from "@angular/router" ; import "rxjs/add/operator/filter" ; interface IBreadcrumb { label : string ; params ? : Params ; url : string ; } @ Component ( { selector : "breadcrumb" , template : `
    <ol class="breadcrumb">
      <li><a routerLink="" class="breadcrumb">Home</a></li>
      <li *ngFor="let breadcrumb of breadcrumbs">
        <a [routerLink]="[breadcrumb.url, breadcrumb.params]">{{breadcrumb.label}}</a>
      </li>
    </ol>
  ` } ) export class BreadcrumbComponent implements OnInit { public breadcrumbs : IBreadcrumb [ ] ; constructor ( private activatedRoute , private router ) { this . breadcrumbs = [ ] ; } ngOnInit ( ) { const ROUTE_DATA_BREADCRUMB = "breadcrumb" ; this . router . events . filter ( event => event instanceof NavigationEnd ) . subscribe ( event => { let root = this . activatedRoute . root ; this . breadcrumbs = this . getBreadcrumbs ( root ) ; } ) ; } private getBreadcrumbs ( route , url = "" , breadcrumbs = [ ] ) { const ROUTE_DATA_BREADCRUMB = "breadcrumb" ; let children = route . children ; if ( children . length === 0 ) { return breadcrumbs ; } for ( let child of children ) { if ( child . outlet !== PRIMARY_OUTLET ) { continue ; } if ( ! child . snapshot . data . hasOwnProperty ( ROUTE_DATA_BREADCRUMB ) ) { continue ; } let routeURL = child . snapshot . url . map ( segment => segment . path ) . join ( "/" ) ; url += `/${ routeURL }` ; let breadcrumb = { label : child . snapshot . data [ ROUTE_DATA_BREADCRUMB ] , params : child . snapshot . params , url : url } ; breadcrumbs . push ( breadcrumb ) ; return this . getBreadcrumbs ( child , url , breadcrumbs ) ; } return breadcrumbs ; } }