Angular 面包屑组件 | ng-hub-ui-breadcrumbs
Angular 面包屑组件，支持 Router 集成、自定义模板、RTL 以及灵活的样式 token。
API 参考
这里是 breadcrumbs 的完整契约：你可以绑定、监听、投影和设置主题的一切，都集中在一处。接入你需要的部分，自定义你想要的样式——它是 standalone 的，且对 signal 友好。
输入
通过 3 个输入项精细调校 breadcrumbs。像绑定任意 Angular @Input 一样绑定它们。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
breadcrumbs$ | Observable<BreadcrumbItem[]> | — | 根据路由数据自动生成的面包屑项 Observable 流。 |
variant | string | — | 面包屑链接的语义强调色（如 primary、success）或任意自定义 token 名称。 |
truncateItems | boolean | false | 为 true 时，将每个标签裁剪到 --hub-breadcrumb-max-item-width 并以省略号显示，溢出时显示提示。 |
输出
尚未记录任何输出项。
模板
打造你自己的样式——1 个模板插槽让你可以投影自定义标记。
| 名称 | 描述 | 示例 |
|---|---|---|
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> |