UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载导读Breadcrumb面包屑是 ng-zorro-antd基于 Ant Design 设计体系的 Angular UI 组件库中位于 Navigation 分类下的导航组件用于在层级结构中展示用户当前所处位置并允许用户回退到层级中更上级的状态。本文以 components/breadcrumb/doc/index.en-US.md 为骨架结合 breadcrumb.component.ts 等源码与 breadcrumb.spec.ts 测试用例完整讲解基础使用、自定义分隔符、下拉菜单项、基于 Angular Router 的nzAutoGenerate自动生成机制以及面向国际化场景的nzRouteLabel、nzRouteLabelFn、nzRouteFn三个配置函数。读完本文你将能在一个多层级 Angular 应用中快速落地一套可维护、可国际化的面包屑导航。何时使用 Breadcrumb根据官方文档当出现以下情况时应使用面包屑导航系统层级结构超过两层hierarchy 多于两层需要告知用户当前所处位置用户可能需要回退到更高层级应用采用多层架构multi-layer architecture。基础用法与组件 API引入模块面包屑组件由NzBreadCrumbModule提供声明并导出nz-breadcrumb、nz-breadcrumb-item、nz-breadcrumb-separator三个组件见 breadcrumb.module.ts。在独立组件standalone中直接imports: [NzBreadCrumbModule]即可例如官方 demo basic.ts。最简单的用法是嵌套nz-breadcrumb-item声明层级源码模板见 breadcrumb.component.tsnz-breadcrumb nz-breadcrumb-itemHome/nz-breadcrumb-item nz-breadcrumb-item aApplication List/a /nz-breadcrumb-item nz-breadcrumb-itemAn Application/nz-breadcrumb-item /nz-breadcrumb每个nz-breadcrumb-item内部的ng-content会被渲染进带ant-breadcrumb-link类的 span 中见 breadcrumb-item.component.ts因此文本、a链接均可直接放入nz-breadcrumb-separator会包裹在ant-breadcrumb-separator样式的容器里见 breadcrumb-separator.component.ts。测试用例也验证了每个 item 首个子元素带ant-breadcrumb-link、第二个子元素带ant-breadcrumb-separator、容器带ant-breadcrumb类见 breadcrumb.spec.ts。nz-breadcrumb 属性一览属性说明类型默认值[nzSeparator]自定义分隔符string \| TemplateRefvoid \| null/[nzAutoGenerate]是否根据路由自动生成面包屑booleanfalse[nzRouteLabel]决定路由配置中显示文本的字段名仅在nzAutoGenerate为true时生效stringbreadcrumb[nzRouteLabelFn]格式化面包屑项文本常用于国际化应用翻译 i18n key仅在nzAutoGenerate为true时生效(label: string) stringlabel label[nzRouteFn]格式化面包屑项路由常用于国际化应用绑定当前 params 或 query避免跳转丢失参数仅在nzAutoGenerate为true时生效(route: string) routeroute route这些Input()的默认值在 breadcrumb.component.ts 中有源码级确认nzAutoGenerate通过booleanAttribute变换支持nzAutoGenerate/[nzAutoGenerate]true两种写法nzRouteLabel默认breadcrumb两个格式化函数默认均为恒等函数identity function。注意nzSeparator类型包含TemplateRefvoid即支持传入一个模板来渲染复杂分隔符如图标通过nzStringTemplateOutlet指令渲染见 breadcrumb-item.component.ts。自定义分隔符默认分隔符为/可通过[nzSeparator]替换为任意字符串示例见 separator.tsnz-breadcrumb [nzSeparator] nz-breadcrumb-itemHome/nz-breadcrumb-item nz-breadcrumb-itemApplication Center/nz-breadcrumb-item nz-breadcrumb-itemAn Application/nz-breadcrumb-item /nz-breadcrumb也可以传入TemplateRef自定义更丰富的分隔符例如图标demo 中还有独立的 separator 模板示例 separator-independent.ts。测试用例验证了字符串分隔符如与图标分隔符anticon-arrow-right类都能正确渲染见 breadcrumb.spec.ts。底层样式方面.ant-breadcrumb-separator的间距与颜色由 Less 变量breadcrumb-separator-margin、breadcrumb-separator-color控制且最后一个 item 的分隔符会被隐藏li:last-child -separator { display: none; }见 style/index.less。下拉菜单式面包屑项面包屑项支持通过nzOverlay挂接一个NzDropdownMenuComponent下拉菜单常用于当前页有多个同级入口的场景。示例见 dropdown.tsnz-breadcrumb nz-breadcrumb-itemAnt Design/nz-breadcrumb-item nz-breadcrumb-itemaComponent/a/nz-breadcrumb-item nz-breadcrumb-item [nzOverlay]menu a hrefAn Application/a /nz-breadcrumb-item nz-breadcrumb-itemButton/nz-breadcrumb-item /nz-breadcrumb nz-dropdown-menu #menunzDropdownMenu ul nz-menu nzSelectable li nz-menu-itemGeneral/li li nz-menu-itemLayout/li li nz-menu-itemNavigation/li /ul /nz-dropdown-menu其实现位于 breadcrumb-item.component.ts当存在nzOverlay时item 外层会渲染为带ant-breadcrumb-overlay-link类的nz-dropdown触发器并附加一个down图标提示可展开。对应的测试见 breadcrumb.spec.ts。该能力依赖NzDropdownModule使用前需一并引入。路由自动生成nzAutoGenerate当路由层级较多时手动编写每个面包屑项既繁琐又容易与路由配置脱节。开启nzAutoGenerate后组件会在每次路由NavigationEnd事件时自动递归解析ActivatedRoute树从各层路由配置的data中读取标签并生成面包屑。基本用法在路由 data 中声明标签通过配置路由的data字段指定每层显示的文本{ path: /path, component: SomeComponent, data: { breadcrumb: Display Name } }对于懒加载模块需要把data写在父级路由因为子模块内部的路由在加载完成前不可见{ path: first, loadChildren: () import(./first/first.module).then(m m.FirstModule), data: { breadcrumb: First }, }模板中只需一行nz-breadcrumb [nzAutoGenerate]true/nz-breadcrumb自动生成的底层实现核心逻辑在 breadcrumb.component.tsngOnInit中若nzAutoGenerate为真注册路由监听订阅router.events过滤NavigationEnd并用startWith(true)触发首次渲染对应源码 breadcrumb.component.tsgetBreadcrumbs(route, url, breadcrumbs)递归遍历route.children仅解析PRIMARY_OUTLET主路由出口即未命名的router-outlet下的子路由拼接各层 URL segment 得到nextUrlrouteUrl为空时不改变这正是懒加载路由场景从child.snapshot.data[this.nzRouteLabel]取标签经nzRouteLabelFn格式化再经nzRouteFn处理 URL仅当routeUrl与标签都非空时才生成一个BreadcrumbOption { label, params, url }对应源码 breadcrumb.component.ts生成的面包屑渲染为a [attr.href]breadcrumb.url (click)navigate(url, $event)点击时通过Router.navigateByUrl跳转对应源码 breadcrumb.component.ts 与 breadcrumb.component.ts。测试用例完整覆盖了这些行为见 breadcrumb.spec.ts路由one/two/three/four中只有two、three两层配置了breadcrumb标签因此生成 2 个面包屑data.breadcrumb为空的层级如four、one不生成条目one单独导航时生成 0 个面包屑非主出口named outlet如nonPrimary中的路由不会被解析。重要限制开启nzAutoGenerate需要应用导入RouterModule或使用provideRouter。源码在获取Router/ActivatedRoute失败时会抛出错误提示 You should import RouterModule if you want to use NzAutoGenerate.见 breadcrumb.component.ts对应的异常测试见 breadcrumb.spec.ts。自定义标签字段nzRouteLabel默认从data.breadcrumb读取标签如果项目不想用breadcrumb这个字段名可用nzRouteLabel指定nz-breadcrumb [nzAutoGenerate]true [nzRouteLabel]customBreadcrumb/nz-breadcrumb{ path: path, component: SomeComponent, data: { customBreadcrumb: Display Name } }源码中child.snapshot.data[this.nzRouteLabel]即按此字段名取值见 breadcrumb.component.ts。测试用例使用customBreadcrumb作为标签字段并断言生成结果见 breadcrumb.spec.ts。国际化标签翻译nzRouteLabelFn在应用需要支持多语言时路由配置里通常只存 i18n key如i18n.aaa.bbbb显示前需要翻译。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);其调用点位于getBreadcrumbs中的const breadcrumbLabel this.nzRouteLabelFn(child.snapshot.data[this.nzRouteLabel]);见 breadcrumb.component.ts。测试中传入label label ?${label} ${label}: 的函数断言标签被格式化两次拼接见 breadcrumb.spec.ts。路由参数保留nzRouteFn面包屑点击跳转时如果当前页面 URL 携带 params 或 query例如/path;id123?activetrue直接按路由配置生成的链接会丢失这些参数。nzRouteFn可在生成每个面包屑 URL 时进行加工、绑定参数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);其调用点在const shapedUrl this.nzRouteFn(nextUrl);见 breadcrumb.component.ts加工后的 URL 会写入BreadcrumbOption.url并作为链接href渲染。测试用例断言routeFn route ${route};activetrue 生成的 url 包含activetrue见 breadcrumb.spec.ts另有单测验证nzRouteFn被以nextUrl为参数调用见 breadcrumb.spec.ts。结合路由链接的普通用法若不想用自动生成也可以手动结合RouterLink实现可点击的面包屑见官方 demo router.tsnz-breadcrumb nz-breadcrumb-item a [routerLink][../../]Home/a /nz-breadcrumb-item nz-breadcrumb-itemBreadcrumb/nz-breadcrumb-item /nz-breadcrumb此方式适合层级简单、无需随路由动态变化的场景。RTL 与样式细节组件支持 RTL从右到左排版host 上会根据Directionality注入的方向值动态添加ant-breadcrumb-rtl类见 breadcrumb.component.ts样式文件中对应.ant-breadcrumb-rtl { direction: rtl; }见 style/index.less。测试中通过testDirectionality工具验证 RTL 类正确切换见 breadcrumb.spec.ts。样式关键点ol容器使用 flex 布局自动换行末级 item 使用breadcrumb-last-item-color强调色链接 hover 有 0.3s 颜色过渡见 style/index.less。主题颜色与间距均可通过覆盖这些 Less 变量实现个性化定制。小结与推荐实践层级固定、内容简单的站点直接手写nz-breadcrumb-item配合[nzSeparator]自定义分隔符、nzOverlay挂下拉菜单多层架构、路由驱动的大型应用开启nzAutoGenerate在路由data中维护标签配合nzRouteLabel统一字段名、nzRouteLabelFn做 i18n 翻译、nzRouteFn保留跳转参数务必记住nzAutoGenerate依赖 Angular Router需导入RouterModule或使用provideRouter且只解析主路由出口PRIMARY_OUTLET命名出口中的路由不会被计入。相关资源组件 API 文档 index.en-US.md另有中文版 index.zh-CN.md、源码入口 public-api.ts、全部 7 个官方示例位于 components/breadcrumb/demo。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ant-design Breadcrumb 面包屑组件基础用法详解从基本导航到路由集成ant design Breadcrumb 面包屑组件基础用法详解从基本导航到路由集成 面包屑Breadcrumb是 ant design 中用于展示当UI组件前端设计系统Rsuite Breadcrumb 面包屑组件实战API、自动折叠与路由集成全解析Rsuite Breadcrumb 面包屑组件实战API、自动折叠与路由集成全解析 本文以 Rsuite 的 Breadcrumb 组件为核心覆盖默认渲染、前端UI组件Shoelace Breadcrumb 面包屑组件完全指南从基础用法到源码级原理解析Shoelace Breadcrumb 面包屑组件完全指南从基础用法到源码级原理解析 Breadcrumb面包屑是 Web 站点导航中不可或缺的层级指示组UI组件前端上一篇在 OneUptime 中接入 Serilog 结构化日志基于 OTLP 的 .NET 日志采集完整指南下一篇如何用Ventoy轻松制作多系统启动U盘终极指南带你告别反复格式化创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考