/// /// Copyright © 2016-2019 The Thingsboard Authors /// /// Licensed under the Apache License, Version 2.0 (the "License"); /// you may not use this file except in compliance with the License. /// You may obtain a copy of the License at /// /// http://www.apache.org/licenses/LICENSE-2.0 /// /// Unless required by applicable law or agreed to in writing, software /// distributed under the License is distributed on an "AS IS" BASIS, /// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. /// See the License for the specific language governing permissions and /// limitations under the License. /// import { Component, OnDestroy, OnInit } from '@angular/core'; import { BehaviorSubject, Subject } from 'rxjs'; import { BreadCrumb } from './breadcrumb'; import { ActivatedRoute, ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router'; import { distinctUntilChanged, filter, map } from 'rxjs/operators'; @Component({ selector: '[tb-breadcrumb]', templateUrl: './breadcrumb.component.html', styleUrls: ['./breadcrumb.component.scss'] }) export class BreadcrumbComponent implements OnInit, OnDestroy { breadcrumbs$: Subject> = new BehaviorSubject>(this.buildBreadCrumbs(this.activatedRoute.snapshot)); routerEventsSubscription = this.router.events.pipe( filter((event) => event instanceof NavigationEnd ), distinctUntilChanged(), map( () => this.buildBreadCrumbs(this.activatedRoute.snapshot) ) ).subscribe(breadcrumns => this.breadcrumbs$.next(breadcrumns) ); lastBreadcrumb$ = this.breadcrumbs$.pipe( map( breadcrumbs => breadcrumbs[breadcrumbs.length - 1]) ); constructor(private router: Router, private activatedRoute: ActivatedRoute) { } ngOnInit(): void { } ngOnDestroy(): void { if (this.routerEventsSubscription) { this.routerEventsSubscription.unsubscribe(); } } buildBreadCrumbs(route: ActivatedRouteSnapshot, breadcrumbs: Array = []): Array { let newBreadcrumbs = breadcrumbs; if (route.routeConfig && route.routeConfig.data) { const breadcrumbData = route.routeConfig.data.breadcrumb; if (breadcrumbData && !breadcrumbData.skip) { const label = breadcrumbData.label || 'home.home'; const icon = breadcrumbData.icon || 'home'; const isMdiIcon = icon.startsWith('mdi:'); const link = [ '/' + route.url.join('') ]; const queryParams = route.queryParams; const breadcrumb = { label, icon, isMdiIcon, link, queryParams }; newBreadcrumbs = [...breadcrumbs, breadcrumb]; } } if (route.firstChild) { return this.buildBreadCrumbs(route.firstChild, newBreadcrumbs); } return newBreadcrumbs; } }