Как реализовать хлебные крошки в Angular 7

Я пытаюсь реализовать хлебные крошки в приложении на основе 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' }}
];

Но я не получаю данные и параметры


angular breadcrumbs angular7
person Amit Dube    schedule 30.11.2018    source источник
comment
Я опоздал сюда, но вы посмотрели на xng-breadcrumbs. Он предоставляет простое в использовании решение для разбивки в Angular. Вы можете проверить npmjs.com/package/xng-breadcrumb Демо-приложение Angular, демонстрирующее хлебные крошки использование в Angular — xng-breadcrumb.netlify.com   -  person Uday Vunnam    schedule 29.09.2019

Ответы (1)


arrow_upward
6
arrow_downward

Обновите логику подписки маршрутизатора в файле ts компонента Breadcrumb с помощью приведенного ниже кода.

  ngOnInit() {

    this.router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .pipe(map(() => this.activatedRoute))
      .pipe(map((route) => {
        while (route.firstChild) { route = route.firstChild; }
        return route;
      }))
      .pipe(filter(route => route.outlet === PRIMARY_OUTLET))
      .subscribe(route => {

        let snapshot = this.router.routerState.snapshot;
        this.breadcrumbs = [];
        let url = snapshot.url;
        let routeData = route.snapshot.data;

        console.log(routeData);
        let label = routeData['breadcrumb'];
        let params = snapshot.root.params;

        this.breadcrumbs.push({
          url: url,
          label: label,
          params: params
        });

      });

}

Рабочая ссылка stackblitz: https://stackblitz.com/edit/breadcrumb-in-angular-7

Недавно я реализовал ng-dynamic-breadcrumb, ng7-dynamic-breadcrumb, ng7-bootstrap-breadcrumb и ng7-mat-breadcrumb Модули хлебных крошек Angular. Пожалуйста, проверьте эти модули, я надеюсь, что это поможет динамическим панировочным сухарям.

person Raja Rama Mohan Thavalam    schedule 16.03.2019
comment
Я проверил ваши модули, и они потрясающие. Но, честно говоря, я предпочитаю ng7-bootstrap-breadcrumb, потому что сгенерированный html кажется более близким к тому, чем должны быть хлебные крошки. Он генерирует список ‹ol›, а также совместим с ариями. - person Celso Soares; 17.04.2019
comment
@CelsoSoares Спасибо! Удачного кодирования :) (у) - person Raja Rama Mohan Thavalam; 18.04.2019
comment
КСТАТИ. В ng7-bootstrap-breadcrumb можно добавить определенные классы к каждой ссылке? Например, помимо параметров label и url у вас есть что-то вроде классов? - person Celso Soares; 08.05.2019
comment
@CelsoSoares В настоящее время мы не предоставляем такую ​​​​функцию. Если возможно, создайте заявку на будущий URL-адрес ссылки: github.com/rajaramtt/ng7-dynamic-breadcrumb/issues - person Raja Rama Mohan Thavalam; 08.05.2019
comment
@RajaRamaMohanThavalam, вы должны использовать только одну трубку, и любые побочные эффекты должны выполняться в кране, а не в подписке. пожалуйста, обратитесь к документации rxjs - person Mike; 05.01.2021