¿Cómo actualizar la URL activamente al cambiar el idioma en Angular usando Transloco?

Problema Identificado

Al cambiar el idioma mediante un botón, las traducciones se actualizan adecuadamente en el template, sin embargo, la URL generada por el pipe lang no se refleja. El pipe transforma la URL como se espera, pero no reacciona ante el cambio de idioma al ser activado el método switchLang.

Soluciones Propuestas

1. Uso de un servicio Angular para Observable:

   Para manejar los cambios de manera reactiva, podemos crear un servicio que emita los cambios de idioma. A continuación se muestra cómo se puede implementar esto:

   import { Injectable } from '@angular/core';
   import { BehaviorSubject } from 'rxjs';
   
   @Injectable({
    providedIn: 'root',
   })
   export class LanguageService {
    private langSubject = new BehaviorSubject<string>('en');
    lang$ = this.langSubject.asObservable();
   
    setLang(lang: string) {
      this.langSubject.next(lang);
    }
   }

   Luego, modifica el componente principal para utilizar este servicio:

   import { LanguageService } from './language.service';
   
   constructor(private languageService: LanguageService) {}
   
   switchLang() {
    const newLang = this.transloco.getActiveLang() === 'en' ? 'es' : 'en';
    this.transloco.setActiveLang(newLang);
    this.languageService.setLang(newLang); // Emitir el cambio
   }

2. Actualizar el Pipe para Escuchar Cambios:

   Modifica el pipe LangPipe para que suscriba a los cambios del servicio:

   import { Component, OnDestroy } from '@angular/core';
   
   @Pipe({
    name: 'lang',
   })
   export class LangPipe implements OnDestroy {
    private currentLang: string;
   
    constructor(private languageService: LanguageService) {
      this.languageService.lang$.subscribe(lang => {
        this.currentLang = lang;
      });
    }
   
    transform(value: string) {
      return `${this.currentLang}/${value}`.replace(////g, "https://stackoverflow.com/");
    }
   
    ngOnDestroy() {
      // Aquí podrías realizar alguna limpieza (unsubscribe)
    }
   }

Conclusión

Implementar un sistema reactivo utilizando un servicio de Angular te permitirá gestionar cambios de idioma y actualizaciones de URL de manera eficiente. Al seguir esta metodología, cada vez que cambies el idioma con el botón, la URL se actualizará automáticamente para reflejar el idioma seleccionado. Esta solución no solo mejora la funcionalidad de tu aplicación, sino que también asegura una mejor experiencia de usuario.

Si existe una manera más simple y eficiente dentro de la biblioteca Transloco para manejar esta situación, es recomendable consultarlo en la documentación oficial o en foros de la comunidad para mantenerte actualizado.