Breadcrumb面包屑

显示当前页面在系统层级结构中的位置，并能向上返回。

何时使用

• 当系统拥有超过两级以上的层级结构时；
• 当需要告知用户『你在哪里』时；
• 当需要向上导航的功能时。

import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';

代码演示

基本

最简单的用法。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-breadcrumb-basic',
  template: `
    <nz-breadcrumb>
      <nz-breadcrumb-item>
        Home
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        <a>Application List</a>
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        An Application
      </nz-breadcrumb-item>
    </nz-breadcrumb>
  `
})
export class NzDemoBreadcrumbBasicComponent {}

路由

和 RouterLink 进行结合使用。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-breadcrumb-router',
  template: `
    <nz-breadcrumb>
      <nz-breadcrumb-item>
        <a [routerLink]="['../../']">Home</a>
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        Breadcrumb
      </nz-breadcrumb-item>
    </nz-breadcrumb>
  `
})
export class NzDemoBreadcrumbRouterComponent {}

分隔符

使用 nzSeparator 可以自定义分隔符。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-breadcrumb-separator',
  template: `
    <h4>String</h4>
    <nz-breadcrumb nzSeparator=">">
      <nz-breadcrumb-item>
        Home
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        <a>Application List</a>
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        An Application
      </nz-breadcrumb-item>
    </nz-breadcrumb>
    <br />
    <h4>TemplateRef</h4>
    <nz-breadcrumb [nzSeparator]="iconTemplate">
      <nz-breadcrumb-item>
        Home
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        <a>Application List</a>
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        An Application
      </nz-breadcrumb-item>
    </nz-breadcrumb>
    <ng-template #iconTemplate><i nz-icon nzType="arrow-right"></i></ng-template>
  `,
  styles: [
    `
      h4:first-child {
        margin-top: 0;
      }
      h4 {
        margin: 16px 0;
        font-size: 14px;
        line-height: 1;
        font-weight: normal;
      }
    `
  ]
})
export class NzDemoBreadcrumbSeparatorComponent {}

独立的分隔符

使用 nz-breadcrumb-separator 可以自定义分隔符。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-breadcrumb-separator-independent',
  template: `
    <nz-breadcrumb [nzSeparator]="null">
      <nz-breadcrumb-item>
        Location
      </nz-breadcrumb-item>
      <nz-breadcrumb-separator>
        :
      </nz-breadcrumb-separator>
      <nz-breadcrumb-item>
        <a>Application Center</a>
      </nz-breadcrumb-item>
      <nz-breadcrumb-separator>
        /
      </nz-breadcrumb-separator>
      <nz-breadcrumb-item>
        Application List
      </nz-breadcrumb-item>
      <nz-breadcrumb-separator>
        /
      </nz-breadcrumb-separator>
      <nz-breadcrumb-item>
        An Application
      </nz-breadcrumb-item>
    </nz-breadcrumb>
  `
})
export class NzDemoBreadcrumbSeparatorIndependentComponent {}

带有图标的

图标放在文字前面。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-breadcrumb-with-icon',
  template: `
    <nz-breadcrumb>
      <nz-breadcrumb-item>
        <i nz-icon nzType="home"></i>
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        <a><i nz-icon nzType="user"></i><span>Application List</span></a>
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        Application
      </nz-breadcrumb-item>
    </nz-breadcrumb>
  `
})
export class NzDemoBreadcrumbWithIconComponent {}

自动生成

通过配置 router.data 自动生成面包屑。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-breadcrumb-auto',
  template: `
    <nz-breadcrumb [nzAutoGenerate]="true">
      Please refer to StackBlitz demo at https://stackblitz.com/edit/ng-zorro-breadcrumb-auto
    </nz-breadcrumb>
  `
})
export class NzDemoBreadcrumbAutoComponent {}

带下拉菜单的面包屑

面包屑支持下拉菜单。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-breadcrumb-dropdown',
  template: `
    <nz-breadcrumb>
      <nz-breadcrumb-item>
        Ant Design
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        <a>Component</a>
      </nz-breadcrumb-item>
      <nz-breadcrumb-item [nzOverlay]="menu">
        <a href>An Application</a>
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        Button
      </nz-breadcrumb-item>
    </nz-breadcrumb>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <ul nz-menu nzSelectable>
        <li nz-menu-item>General</li>
        <li nz-menu-item>Layout</li>
        <li nz-menu-item>Navigation</li>
      </ul>
    </nz-dropdown-menu>
  `
})
export class NzDemoBreadcrumbDropdownComponent {}

API

nz-breadcrumbcomponent

使用 [nzAutoGenerate] 时，需要在路由类中定义 data:

{
  path: 'path',
  component: SomeComponent,
  data: {
    breadcrumb: 'Display Name'
  }
}

对于懒加载路由，应该在父层路由写 data：

{
  path: 'first',
  loadChildren: './first/first.module#FirstModule',
  data: {
    breadcrumb: 'First'
  },
}

使用 nzRouteLabel 自定义路由属性名称:

<nz-breadcrumb [nzAutoGenerate]="true" [nzRouteLabel]="'customBreadcrumb'"></nz-breadcrumb>

{
  path: 'path',
  component: SomeComponent,
  data: {
    customBreadcrumb: 'Display Name'
  }
}

使用 nzRouteLabelFn 在国际化应用中格式化面包屑导航项的文本:

<nz-breadcrumb [nzAutoGenerate]="true" [nzRouteLabel]="'breadcrumbI18nKey'" [nzRouteLabelFn]="translateFn"></nz-breadcrumb>

// In Route
{
  path: 'path',
  component: SomeComponent,
  data: {
    breadcrumbI18nKey: 'i18n.aaa.bbbb'
  }
}
// In component
translateFn = (key: string) => this.yourI18nService.translate(key);