3

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 :)

0

1 respuesta 1

3

Agrega un constructor al servicio y ahí lee el localStorage, luego llama el método next() para publicar el valor leído.

  import {Injectable } from '@angular/core';
  import { BehaviorSubject } from 'rxjs';

    @Injectable()
    export class IdiomaService {
    
      private euskera : BehaviorSubject<boolean>;
      
      constructor(){
    
        let euskera = localStorage.getItem("euskera");
        // instanciar objeto BehaviorSubject
        // y pasar como argumento el valor booleano de euskera
        this.euskera = new BehaviorSubject<boolean>(euskera == 'true');
        
        
      }
    
      setIdioma(euskera:any){
        this.euskera.next(euskera);
        localStorage.setItem("euskera", euskera);
      }
      
      getIdioma(){
        return this.euskera;
      }
    }
9
  • Hola @Lobos, gracias por tu ayuda de nuevo, amigo. Había probado antes a agregar el contructor e intentar leer de ahí el localstorage con el emit pero no me funcionó. Acabo de intentarlo de nuevo tal y como me lo pusiste pero aun así no me funciona. Algo me estoy quedando seguro.
    – Adromicfms
    Commented el 25 sept. 2020 a las 0:16
  • Ya actualicé la respuesta, parece que el problema era tratar los valores del localStorage directamente como bool y no como cadena.
    – Lobos
    Commented el 25 sept. 2020 a las 0:40
  • Hola de nuevo amigo @Lobos. He probado como me dijiste pero por algún motivo me sigue sin funcionar. Al hacer un typeof ambos los trata como string pero al refrescar la página los valores del otro idioma siguen sin setearse. Se vuelven a poner, como siempre, los default.
    – Adromicfms
    Commented el 25 sept. 2020 a las 1:17
  • Logré que funcionara llamando la función emit() dentro de un timeout. Actualicé la respuesta para que veas el código.
    – Lobos
    Commented el 25 sept. 2020 a las 1:32
  • 1
    Continuemos el debate en el chat.
    – Lobos
    Commented el 25 sept. 2020 a las 4:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.