estoy realizando una web bilenguaje y ya con ayuda de ustedes pude logar crear un servicio que comunique mi componente principal con el resto para traducir los textos al cambiar el idioma.
Esto me ha sido muy útil, pero al cambiar entre componentes el valor de la variable se pierde y vuelven a su idioma default.
Tambien me pasa esto al actualizar la página.
Entonces me decidí a guardar el valor de la variable cambiaidiomas en un LocalStorage. Hice testeos mediante Vanille-JS y todo perfecto pero al realizarlo sobre Angular no he sido capaz de hacerlo a través del servicio.
Actualmente tengo esto:
idioma.service.ts:
import { EventEmitter, Injectable } from '@angular/core';
@Injectable()
export class IdiomaService {
private euskera = new EventEmitter<boolean>();
setIdioma(euskera:any){
this.euskera.emit(euskera);
localStorage.setItem("euskera", euskera);
}
getIdioma(){
return this.euskera;
}
}
App.component.ts:
euskera: any;
constructor(private service : IdiomaService){
this.euskera = false;
this.service.setIdioma(this.euskera);
}
setEuskera(){
this.euskera=true;
this.service.setIdioma(this.euskera);
var showLanguages = $("#language");
showLanguages.css('opacity', '0');
}
setCastellano(){
this.euskera=false;
this.service.setIdioma(this.euskera);
this.esconderLenguajes();
var showLanguages = $("#language");
showLanguages.css('opacity', '0');
}
Y en Home.component.ts:
euskera: any;
constructor(service : IdiomaService) {
service.getIdioma().subscribe( (e: boolean) => {
this.euskera = e
});
}
He intentado pasarlo mediante un método por el servicio pero no lo he logrado. También lo he intentado pasar actualmente mediante el setIdioma pero al hacer un console.log desde HOME me sale como null.
¿Alguien me puede explicar como podría hacerlo y me puede ayudar?
Muchas gracias de antemano :)