面包屑 breadcrumb

API#

nz-breadcrumb#

参数 说明 类型 默认值
[nzSeparator] 分隔符自定义 string | TemplateRef<void> '/'
[nzAutoGenerate] 自动生成 Breadcrumb boolean false
[nzRouteLabel] 自定义 route data 属性名称, nzAutoGeneratetrue 时才生效 string 'breadcrumb'

使用 [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'
  }
}