Angular 面包屑导航

参考demo：https://plnkr.co/edit/UOcylJ5noqfRCL7ULJeJ?p=preview。

1.html文件--基于NG-ZORRO框架

< nz-breadcrumb >

< nz-breadcrumb-item >

< a >主页 </ a >

</ nz-breadcrumb-item >

< nz-breadcrumb-item * ngFor= "let breadcrumb of breadcrumbs" >

< a [ routerLink]= "[breadcrumb.url,breadcrumb.params]" >{{breadcrumb.label}} </ a >

</ nz-breadcrumb-item >

</ nz-breadcrumb >

2.逻辑代码

import { Component, OnInit, Input } from '@angular/core';

import { ActivatedRoute, Router, ParamMap, Params, NavigationEnd, PRIMARY_OUTLET } from '@angular/router';

import { Observable } from 'rxjs/Observable';

import 'rxjs/add/operator/filter';

interface IBreadcrumb {

label: string;

params?: Params;

url: string;

}

@ Component({

selector: 'app-breadcrumb',

templateUrl: './breadcrumb.component.html',

styleUrls: [ './breadcrumb.component.css']

})

export class BreadcrumbComponent implements OnInit {

breadcrumbs: IBreadcrumb[];

constructor(

public activatedRoute: ActivatedRoute,

private router: Router

) {

this. breadcrumbs = [];

}

ngOnInit() {

// const ROUTE_DATA_BREADCRUMB = 'breadcrumb';

const ROUTE_DATA_BREADCRUMB = 'title';

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[] = []): IBreadcrumb[] {

const ROUTE_DATA_BREADCRUMB = 'title';

// 获取子路由

let children: ActivatedRoute[] = route. children;

// 如果没有子路由

if ( children. length === 0) {

return breadcrumbs;

}

// 循环每个子路由

for ( let child of children) {

// verify primary route

if ( child. outlet !== PRIMARY_OUTLET) {

continue;

}

// verify the custom data property "breadcrumb" is specified on the route

if (! child. snapshot. data. hasOwnProperty( ROUTE_DATA_BREADCRUMB)) {

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

}

// get the route's URL segment

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

// append route URL to URL

url += `/ ${ routeURL } `;

// add breadcrumb

let breadcrumb: IBreadcrumb = {

label: child. snapshot. data[ ROUTE_DATA_BREADCRUMB],

params: child. snapshot. params,

url: url

};

breadcrumbs. push( breadcrumb);

// recursive

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

}

// we should never get here, but just in case

return breadcrumbs;

}

}