Breadcrumb面包屑

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

何时使用

  • 当系统拥有超过两级以上的层级结构时;
  • 当需要告知用户『你在哪里』时;
  • 当需要向上导航的功能时。
  1. import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';

代码演示

Breadcrumb面包屑 - 图1

基本

最简单的用法。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-breadcrumb-basic',
  4. template: `
  5. <nz-breadcrumb>
  6. <nz-breadcrumb-item>
  7. Home
  8. </nz-breadcrumb-item>
  9. <nz-breadcrumb-item>
  10. <a>Application List</a>
  11. </nz-breadcrumb-item>
  12. <nz-breadcrumb-item>
  13. An Application
  14. </nz-breadcrumb-item>
  15. </nz-breadcrumb>
  16. `
  17. })
  18. export class NzDemoBreadcrumbBasicComponent {}

Breadcrumb面包屑 - 图2

路由

RouterLink 进行结合使用。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-breadcrumb-router',
  4. template: `
  5. <nz-breadcrumb>
  6. <nz-breadcrumb-item>
  7. <a [routerLink]="['../../']">Home</a>
  8. </nz-breadcrumb-item>
  9. <nz-breadcrumb-item>
  10. Breadcrumb
  11. </nz-breadcrumb-item>
  12. </nz-breadcrumb>
  13. `
  14. })
  15. export class NzDemoBreadcrumbRouterComponent {}

Breadcrumb面包屑 - 图3

分隔符

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-breadcrumb-separator',
  4. template: `
  5. <h4>String</h4>
  6. <nz-breadcrumb nzSeparator=">">
  7. <nz-breadcrumb-item>
  8. Home
  9. </nz-breadcrumb-item>
  10. <nz-breadcrumb-item>
  11. <a>Application List</a>
  12. </nz-breadcrumb-item>
  13. <nz-breadcrumb-item>
  14. An Application
  15. </nz-breadcrumb-item>
  16. </nz-breadcrumb>
  17. <br />
  18. <h4>TemplateRef</h4>
  19. <nz-breadcrumb [nzSeparator]="iconTemplate">
  20. <nz-breadcrumb-item>
  21. Home
  22. </nz-breadcrumb-item>
  23. <nz-breadcrumb-item>
  24. <a>Application List</a>
  25. </nz-breadcrumb-item>
  26. <nz-breadcrumb-item>
  27. An Application
  28. </nz-breadcrumb-item>
  29. </nz-breadcrumb>
  30. <ng-template #iconTemplate><i nz-icon nzType="arrow-right"></i></ng-template>
  31. `,
  32. styles: [
  33. `
  34. h4:first-child {
  35. margin-top: 0;
  36. }
  37. h4 {
  38. margin: 16px 0;
  39. font-size: 14px;
  40. line-height: 1;
  41. font-weight: normal;
  42. }
  43. `
  44. ]
  45. })
  46. export class NzDemoBreadcrumbSeparatorComponent {}

Breadcrumb面包屑 - 图4

独立的分隔符

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-breadcrumb-separator-independent',
  4. template: `
  5. <nz-breadcrumb [nzSeparator]="null">
  6. <nz-breadcrumb-item>
  7. Location
  8. </nz-breadcrumb-item>
  9. <nz-breadcrumb-separator>
  10. :
  11. </nz-breadcrumb-separator>
  12. <nz-breadcrumb-item>
  13. <a>Application Center</a>
  14. </nz-breadcrumb-item>
  15. <nz-breadcrumb-separator>
  16. /
  17. </nz-breadcrumb-separator>
  18. <nz-breadcrumb-item>
  19. Application List
  20. </nz-breadcrumb-item>
  21. <nz-breadcrumb-separator>
  22. /
  23. </nz-breadcrumb-separator>
  24. <nz-breadcrumb-item>
  25. An Application
  26. </nz-breadcrumb-item>
  27. </nz-breadcrumb>
  28. `
  29. })
  30. export class NzDemoBreadcrumbSeparatorIndependentComponent {}

Breadcrumb面包屑 - 图5

带有图标的

图标放在文字前面。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-breadcrumb-with-icon',
  4. template: `
  5. <nz-breadcrumb>
  6. <nz-breadcrumb-item>
  7. <i nz-icon nzType="home"></i>
  8. </nz-breadcrumb-item>
  9. <nz-breadcrumb-item>
  10. <a><i nz-icon nzType="user"></i><span>Application List</span></a>
  11. </nz-breadcrumb-item>
  12. <nz-breadcrumb-item>
  13. Application
  14. </nz-breadcrumb-item>
  15. </nz-breadcrumb>
  16. `
  17. })
  18. export class NzDemoBreadcrumbWithIconComponent {}

Breadcrumb面包屑 - 图6

自动生成

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

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

Breadcrumb面包屑 - 图7

带下拉菜单的面包屑

面包屑支持下拉菜单。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-breadcrumb-dropdown',
  4. template: `
  5. <nz-breadcrumb>
  6. <nz-breadcrumb-item>
  7. Ant Design
  8. </nz-breadcrumb-item>
  9. <nz-breadcrumb-item>
  10. <a>Component</a>
  11. </nz-breadcrumb-item>
  12. <nz-breadcrumb-item [nzOverlay]="menu">
  13. <a href>An Application</a>
  14. </nz-breadcrumb-item>
  15. <nz-breadcrumb-item>
  16. Button
  17. </nz-breadcrumb-item>
  18. </nz-breadcrumb>
  19. <nz-dropdown-menu #menu="nzDropdownMenu">
  20. <ul nz-menu nzSelectable>
  21. <li nz-menu-item>General</li>
  22. <li nz-menu-item>Layout</li>
  23. <li nz-menu-item>Navigation</li>
  24. </ul>
  25. </nz-dropdown-menu>
  26. `
  27. })
  28. export class NzDemoBreadcrumbDropdownComponent {}

API

nz-breadcrumbcomponent

参数说明类型默认值
[nzSeparator]分隔符自定义string | TemplateRef<void> | null‘/‘
[nzAutoGenerate]自动生成 Breadcrumbbooleanfalse
[nzRouteLabel]自定义 route data 属性名称, nzAutoGeneratetrue 时才生效string‘breadcrumb’
[nzRouteLabelFn]格式化面包屑导航项的显示文字,通常用于在国际化应用中翻译键值, nzAutoGeneratetrue 时才生效(label:string) => stringlabel => label

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

  1. {
  2. path: 'path',
  3. component: SomeComponent,
  4. data: {
  5. breadcrumb: 'Display Name'
  6. }
  7. }

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

  1. {
  2. path: 'first',
  3. loadChildren: './first/first.module#FirstModule',
  4. data: {
  5. breadcrumb: 'First'
  6. },
  7. }

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

  1. <nz-breadcrumb [nzAutoGenerate]="true" [nzRouteLabel]="'customBreadcrumb'"></nz-breadcrumb>
  1. {
  2. path: 'path',
  3. component: SomeComponent,
  4. data: {
  5. customBreadcrumb: 'Display Name'
  6. }
  7. }

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

  1. <nz-breadcrumb [nzAutoGenerate]="true" [nzRouteLabel]="'breadcrumbI18nKey'" [nzRouteLabelFn]="translateFn"></nz-breadcrumb>
  1. // In Route
  2. {
  3. path: 'path',
  4. component: SomeComponent,
  5. data: {
  6. breadcrumbI18nKey: 'i18n.aaa.bbbb'
  7. }
  8. }
  9. // In component
  10. translateFn = (key: string) => this.yourI18nService.translate(key);