Как правильно реализовать хлебные крошки в условиях ленивой загрузки?

Реализация хлебных крошек (breadcrumbs) в Angular при использовании ленивой загрузки может показаться сложной, но на самом деле весьма простой процесс. Чтобы корректно добавить хлебные крошки в приложение с ленивой загрузкой, вам потребуется следовать следующим основным шагам:

Шаг 1: Установка необходимых пакетов
Перед началом работы убедитесь, что у вас установлены необходимые пакеты. Для работы с хлебными крошками в Angular нам потребуется пакет ngx-breadcrumbs. Вы можете установить его с помощью следующей команды:

npm install ngx-breadcrumbs --save

Шаг 2: Создание breadcrumbs сервиса
Вам потребуется создать сервис, который будет отвечать за управление хлебными крошками. Создайте новый сервис с помощью Angular CLI:

ng generate service breadcrumbs

Затем откройте файл breadcrumbs.service.ts и добавьте в него необходимый код для управления хлебными крошками. Примерная реализация может выглядеть так:

import { Injectable } from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class BreadcrumbsService {
  breadcrumbs: Array<{ label: string, url: string }> = [];

  constructor(private router: Router, private activatedRoute: ActivatedRoute) {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        this.breadcrumbs = [];
        this.createBreadcrumbs(this.activatedRoute.root);
      }
    });
  }

  private createBreadcrumbs(route: ActivatedRoute, url?: string, breadcrumbs?: Array<{ label: string, url: string }>) {
    const children: ActivatedRoute[] = route.children;

    if (children.length === 0) {
      return;
    }

    for (const child of children) {
      if (child.outlet !== 'primary') {
        continue;
      }

      if (!child.snapshot.data.hasOwnProperty('breadcrumb')) {
        return this.createBreadcrumbs(child, url, breadcrumbs);
      }

      const routeURL: string = child.snapshot.url.map(segment => segment.path).join('/');
      url += `/${routeURL}`;

      const breadcrumb: { label: string, url: string } = {
        label: child.snapshot.data.breadcrumb,
        url: url
      };

      breadcrumbs.push(breadcrumb);

      return this.createBreadcrumbs(child, url, breadcrumbs);
    }
  }
}

Шаг 3: Настройка хлебных крошек в маршрутизации
Далее вам потребуется настроить хлебные крошки в маршрутизации приложения. Откройте файл app-routing.module.ts и добавьте данные хлебных крошек для каждого маршрута, где они требуются. Например:

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent, data: { breadcrumb: 'Home' } },
  { path: 'products', loadChildren: () => import('./products/products.module').then(m => m.ProductsModule), data: { breadcrumb: 'Products' } },
  { path: 'products/:id', component: ProductDetailComponent, data: { breadcrumb: 'Product Detail' } },
  // другие маршруты...
];

Шаг 4: Использование хлебных крошек в шаблоне
Теперь можно использовать хлебные крошки в шаблоне вашего компонента. Откройте соответствующий шаблон и добавьте следующий код:

<ng-container *ngIf="breadcrumbsService.breadcrumbs.length > 0">
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item" *ngFor="let breadcrumb of breadcrumbsService.breadcrumbs; let last = last" [ngClass]="{'active': last}">
        <a *ngIf="!last" [routerLink]="breadcrumb.url">{{breadcrumb.label}}</a>
        <span *ngIf="last">{{breadcrumb.label}}</span>
      </li>
    </ol>
  </nav>
</ng-container>

Теперь приложение будет автоматически обновлять хлебные крошки при каждом изменении маршрута.