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

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://HdhCmsTestw3.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测试数据ponent.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);
        }
    }

} 

?

查看更多关于【angular5项目积累总结】breadcrumb面包屑组件的详细内容...