import { Component , OnInit } from '@angular/core' ; import { Router , ActivatedRoute , NavigationEnd , Params , PRIMARY_OUTLET } from '@angular/router' ; import { filter } from 'rxjs/operators' ; import { NotaddBreadcrumb } from '@notadd/types' ; @ Component ( { selector : 'notadd-breadcrumb' , templateUrl : './breadcrumb.component.html' , styleUrls : [ './breadcrumb.component.scss' ] } ) export class NotaddBreadcrumbComponent implements OnInit { breadcrumbs : Array < NotaddBreadcrumb > ; breadcrumbData : string ; constructor ( private activatedRoute , private router ) { this . breadcrumbs = [ ] ; } ngOnInit ( ) { this . breadcrumbs = this . getBreadcrumbs ( this . activatedRoute . root ) ; this . router . events . pipe ( filter ( event => event instanceof NavigationEnd ) ) . subscribe ( event => { this . breadcrumbs = this . getBreadcrumbs ( this . activatedRoute . root ) ; } ) ; } private getBreadcrumbs ( route , url = '' , breadcrumbs = [ ] ) { const routeDataBreadcrumbs = 'title' ; const children = route . children ; if ( children . length === 0 ) { return breadcrumbs ; } for ( const child of children ) { if ( child . outlet !== PRIMARY_OUTLET ) { continue ; } if ( ! child . snapshot . url . length || ! child . snapshot . data . hasOwnProperty ( routeDataBreadcrumbs ) ) { return this . getBreadcrumbs ( child , url , breadcrumbs ) ; } const routeURL = child . snapshot . url . map ( segment => segment . path ) . join ( '/' ) ; url += `/${ routeURL }` ; const breadcrumb = { label : child . snapshot . data [ routeDataBreadcrumbs ] || this . breadcrumbData , params : child . snapshot . params , url } ; breadcrumbs . push ( breadcrumb ) ; return this . getBreadcrumbs ( child , url , breadcrumbs ) ; } } }