angular7 面包屑 breadcrumb

创建组件 breadcrumb，如图

breadcrumb.component.html  中代 码如下图

<nz-breadcrumb class='breadcrumb'>
    <nz-breadcrumb-item *ngFor="let item of breadcrumbsAll">
        <a (click)="toPage(item)">{
  { item.label }}</a>
    </nz-breadcrumb-item>
</nz-breadcrumb>

breadcrumb.component.ts 中代码如下：

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { filter, map } from 'rxjs/operators';

interface BreadcrumbItem {
  deep: number,
  label: string,
  url: string,
}

@Component({
  selector: 'app-breadcrumb',
  templateUrl: './breadcrumb.component.html',
  styleUrls: ['./breadcrumb.component.css']
}