How to properly implement breadcrumbs in lazy loading conditions?

Question

Angular

Hello! How to properly implement breadcrumbs in lazy loading conditions?
I have a blog with a structure - /blog/rubricSlug/blogPageSlug. Depending on the open page, the module corresponding to it is loaded (which naturally pulls up components, etc.).
BlogModule:

import { BlogItemModule } from './blog-item/blog-item.module';
import { SharedModule } from './../../shared/shared.module';
import { Routes, RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { BlogComponent } from './blog.component';
const routes: Routes = [
  {
    path: '',
    component: BlogComponent,
    data: {breadcrumb: 'Блог'}
  },
  {
    path: ':slug',
    loadChildren: () => import('./rubric/rubric.module').then((m) => m.RubricModule),
  }
];
@NgModule({
  declarations: [
    BlogComponent
  ],
  imports: [
    BlogItemModule,
    SharedModule,
    RouterModule.forChild(routes)
  ],
})
export class BlogModule { }

RubricModule:

import { RubricComponent } from './rubric.component';
import { SharedModule } from './../../../shared/shared.module';
import { Routes, RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { BlogItemModule } from '../blog-item/blog-item.module';
const routes: Routes = [
  {
    path: '',
    component: RubricComponent,
    data: {breadcrumb: 'Рубрика'}
  },
  {
    path: ':slug',
    loadChildren: () => import('./blog-page/blog-page.module').then((m) => m.BlogPageModule),
  }
];
@NgModule({
  declarations: [
    RubricComponent
  ],
  imports: [
    BlogItemModule,
    SharedModule,
    RouterModule.forChild(routes)
  ]
})
export class RubricModule { }

BlogPageModule:

import { SharedModule } from './../../../../shared/shared.module';
import { BlogPageComponent } from './blog-page.component';
import { Routes, RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
const routes: Routes = [
  {
    path: '',
    component: BlogPageComponent,
    data: {breadcrumb: 'Страница'}
  }
];
@NgModule({
  declarations: [
    BlogPageComponent
  ],
  imports: [
    SharedModule,
    RouterModule.forChild(routes)
  ]
})
export class BlogPageModule { }

For breadcrumbs, I have created a BreadcrumbsComponent which is included in the app.component
BreadcrumbsComponent:

import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { filter, map } from 'rxjs/operators';
@Component({
  selector: 'app-breadcrumbs',
  templateUrl: './breadcrumbs.component.html',
  styleUrls: ['./breadcrumbs.component.less']
})
export class BreadcrumbsComponent implements OnInit {
  public breadcrumbs = [];
  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute
  ) { }
  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;
      }))
    .subscribe(route => {
        let snapshot = this.router.routerState.snapshot;
        this.breadcrumbs = [];
        let url = snapshot.url;
        let routeData = route.snapshot.data;
        let label = routeData['breadcrumb'];
        let params = snapshot.root.params;
        this.breadcrumbs.push({
          url: url,
          label: label,
          params: params
        });
    });
  }
}

In this case, on the page of the blog or heading, we get only one final route.
How can I get parental information? And how to pass slug dynamically from those components to breacrumbsComponent?

Answer 1

Since the crumbs are multi-level, there is such an offer.
1. There must be a service that accepts data on crumbs. With methods to create crumb of specified level and remove crumb.
2. There must be a way to catch router events at several levels in order to send data to the above services.
This can be done globally by listening to the router, like you do, and passing through firstChild to collect data, but I would suggest making a directive on the RouterOutlet that will take the level, respond to the activate and deactivate events and expose crumbs according to the activatedRouteData content

Answer 2

As a result, I made a service that stores information about crumbs. But I made a complete entry for each module, because in intermediate routes the information is dynamic (it cannot be written to data). Actually it was obvious from the very beginning, but I didn’t think of something.