Чтобы создать навигационную цепочку Angular из URL-адреса, вы можете использовать различные подходы. Вот несколько методов с примерами кода:

Метод 1: использование Angular Router и ActivatedRoute
Этот метод использует Angular Router и ActivatedRoute для извлечения сегментов URL-адреса и построения навигационной цепочки.

1. Определить навигационный интерфейс:

   interface Breadcrumb {
   label: string;
   url: string;
   }

2. Создайте службу навигации для создания навигации:

   import { Injectable } from '@angular/core';
   import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
   import { filter } from 'rxjs/operators';
   @Injectable()
   export class BreadcrumbService {
   breadcrumbs: Breadcrumb[];
   constructor(private router: Router, private activatedRoute: ActivatedRoute) {
   this.breadcrumbs = [];
   this.router.events
     .pipe(filter(event => event instanceof NavigationEnd))
     .subscribe(() => {
       this.breadcrumbs = this.createBreadcrumbs(this.activatedRoute.root);
     });
   }
   private createBreadcrumbs(route: ActivatedRoute, url: string = '', breadcrumbs: Breadcrumb[] = []): Breadcrumb[] {
   const children: ActivatedRoute[] = route.children;
   if (children.length === 0) {
     return breadcrumbs;
   }
   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: Breadcrumb = {
       label: child.snapshot.data.breadcrumb,
       url: url
     };
     breadcrumbs.push(breadcrumb);
     return this.createBreadcrumbs(child, url, breadcrumbs);
   }
   }
   }

3. В вашем компоненте используйте службу навигации для получения навигации:

   import { Component, OnInit } from '@angular/core';
   import { BreadcrumbService, Breadcrumb } from './breadcrumb.service';
   @Component({
   selector: 'app-breadcrumb',
   template: `
   <ol class="breadcrumb">
     <li *ngFor="let breadcrumb of breadcrumbs">
       <a [routerLink]="breadcrumb.url">{{ breadcrumb.label }}</a>
     </li>
   </ol>
   `
   })
   export class BreadcrumbComponent implements OnInit {
   breadcrumbs: Breadcrumb[];
   constructor(private breadcrumbService: BreadcrumbService) {}
   ngOnInit() {
   this.breadcrumbs = this.breadcrumbService.breadcrumbs;
   }
   }

Метод 2. Использование пользовательского канала.
Этот метод предполагает создание пользовательского канала в Angular для преобразования сегментов URL-адресов в формат навигационной цепочки.

1. Создание пользовательского канала:

   import { Pipe, PipeTransform } from '@angular/core';
   @Pipe({
   name: 'breadcrumb'
   })
   export class BreadcrumbPipe implements PipeTransform {
   transform(url: string): string {
   const segments = url.split('/');
   let breadcrumb = '';
   for (const segment of segments) {
     if (segment !== '') {
       breadcrumb += `/${segment}`;
       // You can modify the breadcrumb format as desired
     }
   }
   return breadcrumb;
   }
   }

2. Используйте собственный канал в шаблоне вашего компонента:

   <ng-container *ngIf="url">
   {{ url | breadcrumb }}
   </ng-container>

Это два распространенных метода создания навигационной цепочки Angular на основе URL-адреса. Вы можете выбрать тот, который лучше всего соответствует потребностям вашего проекта.