• Breadcrumb面包屑
    • 何时使用
    • 代码演示
    • API
      • 单独引入此组件
      • nz-breadcrumbcomponent

    Breadcrumb面包屑

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

    何时使用

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

    代码演示

    Breadcrumb面包屑 - 图1

    基本

    最简单的用法。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-breadcrumb-basic',
    5.   template: `
    6.     <nz-breadcrumb>
    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.   `,
    18.   styles: []
    19. })
    20. export class NzDemoBreadcrumbBasicComponent {}

    Breadcrumb面包屑 - 图2

    路由

    和 RouterLink 进行结合使用。

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

    Breadcrumb面包屑 - 图3

    分隔符

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

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

    Breadcrumb面包屑 - 图4

    带有图标的

    图标放在文字前面。

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

    Breadcrumb面包屑 - 图5

    自动生成

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

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

    API

    单独引入此组件

    想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

    1. import { NzBreadCrumbModule } from 'ng-zorro-antd';

    nz-breadcrumbcomponent

    参数说明类型默认值
    [nzSeparator]分隔符自定义string｜TemplateRef<void>'/'
    [nzAutoGenerate]自动生成 Breadcrumbbooleanfalse

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

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