API 参考

这里是 breadcrumbs 的完整契约：你可以绑定、监听、投影和设置主题的一切，都集中在一处。接入你需要的部分，自定义你想要的样式——它是 standalone 的，且对 signal 友好。

通过 7 个输入项精细调校 breadcrumbs。像绑定任意 Angular @Input 一样绑定它们。

名称	类型	默认值	描述
`items`	`BreadcrumbItem[] \| null`	`null`	由使用方提供的路径，替代从路由推导出的路径。保持为 null 时，组件继续读取 HubBreadcrumbsService。
`variant`	`string`	—	面包屑链接的语义强调色（如 primary、success）或任意自定义 token 名称。
`truncateItems`	`boolean`	`false`	为 true 时，将每个标签截断到 --hub-breadcrumb-max-item-width 并加省略号，溢出时显示工具提示。hubBreadcrumbItem 模板同样适用：组件会把投影内容包进自己的 span.hub-breadcrumb__custom 并截断这个盒子，因为封装样式无法触及消费方组件所拥有的元素。
`maxItems`	`number \| undefined`	`undefined`	超过该长度后路径将折叠到指示器之后。undefined 表示无论多长都不折叠。
`itemsBeforeCollapse`	`number`	`1`	折叠路径开头保留的条目数。
`itemsAfterCollapse`	`number`	`1`	折叠路径末尾保留的条目数，包含当前页面。
`collapsedAriaLabel`	`string`	`'Show the hidden breadcrumb items'`	折叠指示器的无障碍名称，使该组件唯一朗读的字符串可由宿主应用翻译。

响应 breadcrumbs 的行为——有 1 个事件可供你挂接逻辑。

名称	类型	描述
`collapsedClick`	`void`	折叠指示器被激活时触发。路径会自行展开；该事件供还需要额外响应的使用方使用。

通过代码驱动 breadcrumbs——其编程接口提供 3 个方法。

名称	签名	返回值	描述
`HubBreadcrumbsService.breadcrumbs`	`breadcrumbs: Signal<BreadcrumbItem[]>`	`Signal<BreadcrumbItem[]>`	作为信号的路径，也是组件自身读取的那个面。它在服务内部只包装一次、为整个应用只订阅一次，因此页头、文档标题或任何其他读取方都能从它派生，无需 async 管道。
`HubBreadcrumbsService.breadcrumbs$`	`breadcrumbs$: Observable<BreadcrumbItem[]>`	`Observable<BreadcrumbItem[]>`	同一条路径的 Observable 形式，保留给已经在用 rxjs 组合的代码。两者报告的是同一次导航，取调用方本来就在说的那一种即可。
`provideHubBreadcrumbTooltip`	`provideHubBreadcrumbTooltip(adapter: HubBreadcrumbTooltipAdapter): EnvironmentProviders`	`EnvironmentProviders`	为整个应用一次性注册工具提示适配器，使被截断的标签显示更丰富的 hub-ui 工具提示，而不是原生 title 属性。移除该 provider 后，标签会退回到 title。

打造你自己的样式——2 个模板插槽让你可以投影自定义标记。

名称	描述	示例
`hubBreadcrumbItem`	用于渲染单个面包屑项的自定义模板	`<ng-template hubBreadcrumbItem let-item let-isLast="isLast"> @if (!isLast) { <a [routerLink]="item.url" class="breadcrumb-link">{{ item.label }}</a> } @else { <span class="breadcrumb-current">{{ item.label }}</span> } </ng-template>`
`hubBreadcrumbLabel`	把被截断标签的完整文本显示为工具提示的指令。组件会把它加在自己渲染的标签上，以及包裹 hubBreadcrumbItem 模板的那个盒子上，所以手动使用只是为了改写提示文本。	`<a class="my-crumb" hubBreadcrumbLabel [routerLink]="item.url">{{ item.label }}</a>`