typescript – Recargar HTML en base a evento de router? Angular

Tengo un componente breadcrumb, el cual esta dentro de un header,fijo en la pagina.
Es decir, se inicia una vez,etc.
Este breadcrumb ,esta suscrito a los eventos del router, para recibir un objeto data con los label y url para armar ese breadcrumb.

Me funciona excelente cuando voy de una pagina a otra (componente a otro) pero cuando estoy en un mismo componente, pero con distintos parametros de ruta, como por ejemplo: componente1/primer-parametro y componente1/segundo-parametro. La suscripcion sigue emitiendo valores, pero mi html del breadcrumb es como que esta vez hace el cambio.

Como necesito rutas dinamicas en ciertas partes, que saco los valores del session storage, utilizo un pipe para transformar y obtener ese item.

HTML BreadCrumb

  <section class="breadcrumbs" >
    <ng-container *ngFor="let titulo of titulos">
       <a class="title-breadcrumb" *ngIf="!!!titulo.url">
        <p *ngIf="titulo.textBefore" class="bredCrumbTitleNone">{{titulo.textBefore}}</p>
        {{ titulo.label | uppercase | breadCrumbFormat }}
        <p *ngIf="titulo.textAfter" class="bredCrumbTitleNone">{{titulo.textAfter}}</p>
      </a>

      <a class="title-breadcrumb title-breadcrumb-hover" *ngIf="!!titulo.url" (routerLink)="titulo.url | breadCrumbFormat">
        {{ titulo.label | uppercase | breadCrumbFormat  }}<span class="mat-icon arrow-tittle" >arrow_forward_ios</span>
      </a>

    </ng-container>
  </section>

Como ven utilizo 2 pipes, el personalizado mio “breadCrumbFormat” que es el que obtiene el item del storage para poner el valor dinamico. y el uppercase default.

COMPONENT TS, Breadcrumb

export class BreadcrumbsComponent implements OnDestroy {
  public titulos: any;
  public tituloSubs: Subscription;

  constructor(
    private router: Router,
    private _location: Location,
  ) {

  this.tituloSubs = this.getArgumentosRuta().subscribe((response) => {
    console.log('DATA-ROUTER',response);
      this.titulos = response.titulos;
  });
  }

  getArgumentosRuta() {
    return this.router.events.pipe(
      filter((event) => event instanceof ActivationEnd),
      filter((event: ActivationEnd) => event.snapshot.firstChild === null),
      map((event: ActivationEnd) => event.snapshot.data)
      );
  }
  
 }

Aca esta lo importante, en esta suscripcion, es donde escucho los eventos del router cuando cambia de pagina y demas y saco el objeto data (que es el que paso en el routing) para obtener los labels y demas.

Atentos al console.log ya que mas abajo mostrare, que cuando se cambia de parametro en la misma ruta sigue emitiendo valor como si fuese que se cambio a otra ruta

Routing:

const routes: Routes = (
  {
    path: '',
    component: IndicatorsComponent,
    canActivate: (LoggedGuard),
    data: {titulos:( {label:'(STORAGE)tipoIndicador', url:''})},
  },
)

Aca se arma el objeto del breadCrumb y para cuando es dinamico utilizo la key “(STORAGE)” para saber que es tengo que sacar el valor del storage y el item es la palabra posterior a esta key. Esto lo obtengo mediante el pipe personalizado:

PIPE Breadcrumb

export class BreadCrumbFormatPipe implements PipeTransform {

  constructor(){}

  transform(value: any) {
    if(value.includes('(STORAGE)')){
      let indice = value.indexOf('(STORAGE)'),
          primeraParte = value.substring(0,indice),
          itemStorage = value.substring(indice).replace('(STORAGE)','').trim(),

          newValue = `${primeraParte}${sessionStorage.getItem(itemStorage || '')}`

      return newValue
    }
    return value;
  }

}

Como les digo cuando voy de una ruta a otra (osea diferentes componentes) el pipe me funciona perfectamente

Ejemplo POSITIVO

Voy de la ruta indicadores(IndicatorsComponent) a la ruta acciones(ActionsComponent)

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Funciona sin problemas.

Ahora bien, cuando lo hago dentro del mismo componente (IndicatorsComponent) pero con diferentes parametros:

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Como ven NO CAMBIO. se acuerdan del console.log de arriba? que se ejecutaba cuando pasaba un evento del router y este le asignaba el valor y demas: bueno le adjunto la captura de cuando fui a cada ruta con su parametro y se ejecuto bien sin problemas:

introducir la descripción de la imagen aquí

No se bien que podria ser, probe un timeOut, antes de asignar el valor porque capaz se setiaba antes que el session storage, pero tampoco era esto. El ngOnChance del breadcrumb,no emite nada.

Como puedo recargar el html cuando sale el evento del router, el que imprime el console log?