Breadcrumb面包屑

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

何时使用#

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

代码演示

Home / Application List / An Application /

最简单的用法。

expand codeexpand code
      加载中
    
Home / Breadcrumb /

RouterLink 进行结合使用。

expand codeexpand code
      加载中
    

String

Home > Application List > An Application >

TemplateRef

HomeApplication ListAn Application

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

expand codeexpand code
      加载中
    
Location:Application Center/Application List/An Application

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

expand codeexpand code
      加载中
    
/ Application List / Application /

图标放在文字前面。

expand codeexpand code
      加载中
    

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

expand codeexpand code
      加载中
    
Ant Design / Component / An Application / Button /

面包屑支持下拉菜单。

expand codeexpand code
      加载中
    

API#

nz-breadcrumb#

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

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

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

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

{
  path: 'first',
  loadChildren: () => import('./first/first.module').then(m => m.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);

使用 nzRouteFn 来使用格式化 URL 或添加 query params:

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

bindCurrentParams(params, route) {
  let newRoute = route;
  for (const key in params) {
    if (params.hasOwnProperty(key)) {
      newRoute += `;${key}=${params[key]}`;
    }
  }
  return newRoute;
}

const params = this.activatedRoute.snapshot.params;

customRoute = (route:string) => this.bindCurrentParams(params,route);