Как динамически изменить заголовок angular 8 в зависимости от активного маршрута, если в маршруте есть параметры

Question

Я использую эту технику, чтобы изменить свой заголовок на основе изменений моего маршрута

Компонент приложения:

this.router.events
  .filter((event) => event instanceof NavigationEnd)
  .map(() => this.activatedRoute)
  .map((route) => {
    while (route.firstChild) { route = route.firstChild; }
    return route;
  })
  .filter((route) => route.outlet === 'primary')
  .mergeMap((route) => route.data)
  .subscribe((event) => this.titleService.setTitle(event['title']));}

Маршрут приложения:

{
  path : '',
  redirectTo: 'home',
  pathMatch: 'full',
  data: {title: 'Home'}

}

И это работало нормально, пока я не попытался изменить заголовок из другого компонента (потому что мне нужно было получить параметры маршрута и установить их в качестве заголовка) и это не сработало.

Пример:

HTML:

 {
    path: 'products/:category/:id',
    component: DetailPageComponent,
  },

Компонент:

    this.route.params.subscribe((params) => {
  this.route.queryParams.forEach((queryParams) => {
    this.category = queryParams['type'];
    this.type = null;
    this.type = params['category'];

    if(this.category) {
      this.titleService.setTitle(this.category + '- Page');
    } else if (this.type) {
      this.titleService.setTitle(this.category + '- Page');
    }

Так есть ли возможность изменить заголовок из компонента, который он сам, и сохранить данные : {title: ' Начало '} техника? или есть способ получить категорию из маршрута и использовать ее напрямую, например data: {title: ': category'} ?