Estoy haciendo una especie de internacionalizador en caliente, así que me ingenié esta solución.
Tengo un servicio que según yo hará todo el trabajo de emitirles a todos los suscriptores el cambio de lenguaje.
lang.service.ts
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class LangService {
constructor() { }
setLanguage( lang?: string ): Observable<any> {
const newLang = lang ? lang : 'es';
console.log( newLang );
return new Observable( obs => obs.next( newLang ));
}
}
El responsable de cambiar el lenguaje es un componente con este html intl.component.html
<div>
<button mat-mini-fab color="primary" (click)="swapLang( 'es' )">
ES
</button>
<button mat-mini-fab color="primary" (click)="swapLang( 'en' )">
EN
</button>
</div>
Este es el controlador, que ejecuta una vez al inicio y manda por default 'es' y cuando se cambia se le pasa al Observer otro parámetro
constructor(
private lang$: LangService
) { }
ngOnInit(): void {
const lang = 'es';
this.lang$.setLanguage( lang );
}
swapLang( lang: string ): void {
this.lang$.setLanguage( lang );
}
Este es una vista que está en escucha de esos cambios al Observer
lang: string;
constructor(
private lang$: LangService
) { }
this.lang$.setLanguage().subscribe( lang => {
console.log( lang );
this.lang = lang;
})
Ya con eso en el HTML de la vista puedo jugar con ese parámetro Hice un track del evento y está llegando todo, a excepción del final
- Cuando das click a un botón Bien
- Cuando llega al servicio y pasa al Observable Bien
- Cuando me suscribo al Observable Mal, no está entrando la suscripción de la vista
Tengo duda si es la mejor forma de hacer un internacionalizador en caliente, el cliente no quiere "Recargar la página ni la ruta", es decir no quiere usar
dominio.com/es Para español
dominio.com/en Para inglés
Quiere que cuando le de click a un botón todo cambie, ya tengo la forma de renderizar las labels, pero necesito cachar la emisión del Observable
Se admiten nuevas formas para hacerlo