API-Referenz

Hier ist der vollständige Vertrag für breadcrumbs: alles, was du binden, abhören, projizieren und gestalten kannst, an einem Ort gesammelt. Verdrahte, was du brauchst, und gestalte, was du willst — es ist standalone und Signals-freundlich.

Inputs

Stelle breadcrumbs mit 7 Inputs ein. Binde sie wie jeden Angular-@Input.

Name	Typ	Standard	Beschreibung
`items`	`BreadcrumbItem[] \| null`	`null`	Vom Konsumenten gelieferter Pfad, der den aus dem Router abgeleiteten ersetzt. Bleibt er null, liest die Komponente weiterhin HubBreadcrumbsService.
`variant`	`string`	—	Semantischer Akzent für die Breadcrumb-Links (z.B. primary, success) oder ein beliebiger eigener Token-Name.
`truncateItems`	`boolean`	`false`	Wenn true, wird jede Beschriftung mit Auslassungspunkten auf --hub-breadcrumb-max-item-width gekürzt und bei Überlauf ein Tooltip gezeigt. Eine hubBreadcrumbItem-Vorlage ist ebenfalls abgedeckt: die Komponente umschließt den projizierten Inhalt mit einem eigenen span.hub-breadcrumb__custom und kürzt diesen, denn gekapselte Styles erreichen keine Elemente, die der konsumierenden Komponente gehören.
`maxItems`	`number \| undefined`	`undefined`	Länge, ab der sich der Pfad hinter einem Indikator einklappt. Undefined klappt nie ein, wie lang der Pfad auch wird.
`itemsBeforeCollapse`	`number`	`1`	Einträge, die am Anfang eines eingeklappten Pfades erhalten bleiben.
`itemsAfterCollapse`	`number`	`1`	Einträge, die am Ende eines eingeklappten Pfades erhalten bleiben, einschließlich der aktuellen Seite.
`collapsedAriaLabel`	`string`	`'Show the hidden breadcrumb items'`	Zugänglicher Name des eingeklappten Indikators, damit die einzige von dieser Komponente angesagte Zeichenkette von der Host-Anwendung übersetzt werden kann.

Outputs

Reagiere darauf, was breadcrumbs tut — 1 Events, an die du deine Logik anknüpfen kannst.

Name	Typ	Beschreibung
`collapsedClick`	`void`	Wird ausgelöst, wenn der eingeklappte Indikator aktiviert wird. Der Pfad klappt von selbst aus; das Ereignis ist für Konsumenten, die zusätzlich reagieren möchten.

Methoden

Steuere breadcrumbs aus dem Code heraus — 3 Methoden auf der programmatischen Schnittstelle.

Name	Signatur	Rückgabe	Beschreibung
`HubBreadcrumbsService.breadcrumbs`	`breadcrumbs: Signal<BreadcrumbItem[]>`	`Signal<BreadcrumbItem[]>`	Der Pfad als Signal — und die Fläche, die die Komponente selbst liest. Er wird einmal im Service verpackt und einmal für die gesamte Anwendung abonniert, sodass ein Seitenkopf, ein Dokumenttitel oder ein beliebiger anderer Leser ohne async-Pipe davon ableitet.
`HubBreadcrumbsService.breadcrumbs$`	`breadcrumbs$: Observable<BreadcrumbItem[]>`	`Observable<BreadcrumbItem[]>`	Derselbe Pfad als Observable, erhalten für Code, der bereits mit rxjs komponiert. Beide Member melden dieselbe Navigation — nimm den, den der aufrufende Code ohnehin spricht.
`provideHubBreadcrumbTooltip`	`provideHubBreadcrumbTooltip(adapter: HubBreadcrumbTooltipAdapter): EnvironmentProviders`	`EnvironmentProviders`	Registriert einen Tooltip-Adapter einmalig für die gesamte Anwendung, sodass eine gekürzte Beschriftung den reicheren hub-ui-Tooltip statt des nativen title-Attributs zeigt. Ohne den Provider fallen die Beschriftungen auf title zurück.

Templates

Mach es zu deinem — 2 Template-Slots lassen dich eigenes Markup projizieren.

Name	Beschreibung	Beispiel
`hubBreadcrumbItem`	Benutzerdefiniertes Template zum Rendern einzelner Breadcrumb-Elemente	`<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`	Direktive, die den vollen Text einer gekürzten Beschriftung als Tooltip zeigt. Die Komponente wendet sie auf die Beschriftungen an, die sie rendert, und auf die Box, in die sie eine hubBreadcrumbItem-Vorlage einwickelt; sie selbst zu setzen dient nur dazu, den Tooltip-Text zu überschreiben.	`<a class="my-crumb" hubBreadcrumbLabel [routerLink]="item.url">{{ item.label }}</a>`