angular5项目积累总结breadcrumb面包屑组件

Posted 2020-10-30 sybboy

view

 

 

code

 

<div class="fxs-breadcrumb-wrapper" aria-label="Navigation history">
    <div class="fxs-breadcrumb-dropmenu">
        <div class="fxs-dropmenu" role="presentation">

            <div class="fxs-dropmenu-content fxs-text-link fxs-popup fxs-portal-bg-txt-br fxs-dropmenu-defaultWidth fxs-dropmenu-right fxs-dropmenu-invisible">
                <ul class="fxs-breadcrumb-overflow">
                </ul>
            </div>
        </div>
    </div>
    <ng-container *ngFor="let breadcrumb of breadcrumbs; index as i">
        <div class="fxs-breadcrumb-divider fxs-trim-svg-secondary">
            <svg height="100%" width="100%" aria-hidden="true" role="presentation" focusable="false">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#FxSymbol0-011"></use>
            </svg>
        </div>
        <a [routerLink]="[breadcrumb.url, breadcrumb.params]" class="fxs-breadcrumb-crumb fxs-trim-text fxs-trim-hover">{{ breadcrumb.label }}</a>
    </ng-container>
</div>

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‘,
    templateUrl: ‘./breadcrumb.component.html‘,
    host: {
        ‘class‘: ‘fxs-breadcrumb‘
    }
})

export class BreadcrumbComponent implements OnInit {

    public breadcrumbs: IBreadcrumb[];


    constructor(
        private activatedRoute: ActivatedRoute,
        private router: Router
    ) {
        this.breadcrumbs = [];
    }


    ngOnInit() {
        
        this.router.events.filter(event => event instanceof NavigationEnd).subscribe(event => {

            let root: ActivatedRoute = this.activatedRoute.root;
            this.breadcrumbs = this.getBreadcrumbs(root);
        });
    }


    private getBreadcrumbs(route: ActivatedRoute, url: string = "", breadcrumbs: IBreadcrumb[] = []): any {
        const ROUTE_DATA_BREADCRUMB: string = "breadcrumb";

        let children: ActivatedRoute[] = 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)) {
                return this.getBreadcrumbs(child, url, breadcrumbs);
            }


            let routeURL: string = child.snapshot.url.map(segment => segment.path).join("/");

            if (routeURL == "") {
                return this.getBreadcrumbs(child, url, breadcrumbs);
            }


            url += `/${routeURL}`;


            let breadcrumb: IBreadcrumb = {
                label: child.snapshot.data[ROUTE_DATA_BREADCRUMB],
                params: child.snapshot.params,
                url: url
            };
            breadcrumbs.push(breadcrumb);


            return this.getBreadcrumbs(child, url, breadcrumbs);
        }
    }

}