Я пытаюсь реализовать хлебные крошки в приложении на основе Angular 7.
HTML-шаблон для корневого компонента, содержащего компонент «хлебных крошек», указан ниже (хлебные крошки находятся вне выхода маршрутизатора)
<app-layout>
<div>
<app-breadcrumb></app-breadcrumb>
<router-outlet></router-outlet>
</div>
</app-layout>
Ts-файл компонента Breadcrumb
ngOnInit() {
this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((router) => {
let snapshot = this.router.routerState.snapshot;
this.breadcrumbs = [];
let url = snapshot.url;
let routeData: Data = snapshot.root.data;
let label = routeData['breadcrumb'];
let params = snapshot.root.params;
this.breadcrumbs.push({
url: url,
label: label,
params: params
});
});
HTML-файл компонента хлебной крошки
<nav aria-label='breadcrumb'>
<ol class='breadcrumb'>
<li *ngFor='let breadcrumb of breadcrumbs'>
<a [routerLink]='[breadcrumb.url, breadcrumb.params]' routerLinkActive='active'>{{ breadcrumb.label }}</a>
</li>
</ol>
</nav>
Определение маршрута выглядит следующим образом
const routes: Routes = [
{ path: 'folders', component: FolderManagementComponent, data: { breadcrumb: 'Home' } },
{ path: 'folders/list-documents', component: ListDocumentsComponent, data: { breadcrumb: 'Documents' } },
{ path: '', redirectTo: '/folders', pathMatch: 'full', data: { breadcrumb: 'Home' }}
];
Но я не получаю данные и параметры