Справочник API

Вот полный контракт breadcrumbs: всё, что можно привязать, прослушать, спроецировать и тематизировать, собрано в одном месте. Подключите то, что нужно, и оформите так, как хотите — это standalone и дружит с сигналами.

Входные свойства

Настройте breadcrumbs с помощью 7 входных свойств. Привязывайте их, как любой @Input в Angular.

Имя	Тип	По умолчанию	Описание
`items`	`BreadcrumbItem[] \| null`	`null`	Цепочка, предоставленная потребителем, заменяет полученную из маршрутизатора. При значении null компонент продолжает читать HubBreadcrumbsService.
`variant`	`string`	—	Семантический акцент для ссылок хлебных крошек (например, primary, success) или любое пользовательское имя токена.
`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[]>`	Цепочка как сигнал — та же поверхность, которую читает сам компонент. Она обёрнута один раз внутри сервиса и подписана один раз на всё приложение, поэтому заголовок страницы, title документа или любой другой читатель выводится из неё без async-пайпа.
`HubBreadcrumbsService.breadcrumbs$`	`breadcrumbs$: Observable<BreadcrumbItem[]>`	`Observable<BreadcrumbItem[]>`	Та же цепочка в виде Observable — оставлена для кода, который уже собирается на rxjs. Оба члена сообщают об одной и той же навигации: берите тот, на котором вызывающий код уже говорит.
`provideHubBreadcrumbTooltip`	`provideHubBreadcrumbTooltip(adapter: HubBreadcrumbTooltipAdapter): EnvironmentProviders`	`EnvironmentProviders`	Регистрирует адаптер тултипа один раз на всё приложение, чтобы усечённая подпись показывала более богатый тултип hub-ui вместо нативного атрибута title. Уберите провайдер — и подписи вернутся к 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>`