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

    Breadcrumb面包屑

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

    何时使用

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

    单独引入此组件

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

    1. import { NzBreadCrumbModule } from 'ng-zorro-antd/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. })
    19. 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. })
    16. 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 nzType="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 nzType="home"></i>
    9.       </nz-breadcrumb-item>
    10.       <nz-breadcrumb-item>
    11.         <a><i nz-icon nzType="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. })
    19. 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 at https://stackblitz.com/edit/ng-zorro-breadcrumb-auto
    8.     </nz-breadcrumb>
    9.   `
    10. })
    11. export class NzDemoBreadcrumbAutoComponent {}

    Breadcrumb面包屑 - 图6

    带下拉菜单的面包屑

    面包屑支持下拉菜单。

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

    API

    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. }

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

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