javascript - Angular 7 ngx-translate doesn't remember the language after refresh - Stack Overflow

admin管理员组

文章数量:1278789

We have an Angular application which has two languages. The default is German and the other one is English. We are using ngx-translate as the translateService.

When you refresh the browser, the application switches back to the default language.

The switchLang() function gets called in our navigation bar:

<li class="nav-item">
    <a class="nav-link" id="switchLang" (click)="switchLang()">
      <span>
        <i class="fa fa-globe" aria-hidden="true"></i>
        <span>{{'switch-lang' | translate}}</span>
      </span>
    </a>
</li>

the ponent.ts:

switchLang() {
    this.languageService.switchLanguage();
}

And the language service:

import { Injectable } from '@angular/core';
import {TranslateService} from '@ngx-translate/core';

@Injectable({ providedIn: 'root' })
export class LanguageService {

  private language = 'de';

  constructor(private translateService: TranslateService) { }

  getCurrentLanguage() {
    return this.language;
  }

  getLocale() {
    if (this.language === 'en') {
      return 'en_US';
    } else {
      return 'de_DE';
    }
  }

  switchLanguage() {
    if (this.language === 'en') {
      this.language = 'de';
    } else {
      this.language = 'en';
    }
    this.translateService.use(this.language);
  }
}

The translateService is the ngx-translate.

We have an Angular application which has two languages. The default is German and the other one is English. We are using ngx-translate as the translateService.

When you refresh the browser, the application switches back to the default language.

The switchLang() function gets called in our navigation bar:

<li class="nav-item">
    <a class="nav-link" id="switchLang" (click)="switchLang()">
      <span>
        <i class="fa fa-globe" aria-hidden="true"></i>
        <span>{{'switch-lang' | translate}}</span>
      </span>
    </a>
</li>

the ponent.ts:

switchLang() {
    this.languageService.switchLanguage();
}

And the language service:

import { Injectable } from '@angular/core';
import {TranslateService} from '@ngx-translate/core';

@Injectable({ providedIn: 'root' })
export class LanguageService {

  private language = 'de';

  constructor(private translateService: TranslateService) { }

  getCurrentLanguage() {
    return this.language;
  }

  getLocale() {
    if (this.language === 'en') {
      return 'en_US';
    } else {
      return 'de_DE';
    }
  }

  switchLanguage() {
    if (this.language === 'en') {
      this.language = 'de';
    } else {
      this.language = 'en';
    }
    this.translateService.use(this.language);
  }
}

The translateService is the ngx-translate.

• javascript
• angular
• typescript
• ngx-translate

Share Improve this question Follow edited Jul 12, 2021 at 18:53 Jason Aller 3,6522828 gold badges4141 silver badges3939 bronze badges asked Apr 12, 2019 at 8:01 Patrik AlexitsPatrik Alexits 99799 silver badges2525 bronze badges 3

• 2 Well you're saving it nowhere. When you refresh the page the whole application repiles. – Roberto Zvjerković Commented Apr 12, 2019 at 8:07
• I thought the ngx-translate has a built-in method for that. I think the localStorage is the direction – Patrik Alexits Commented Apr 12, 2019 at 8:24
• 1 i also remend you to initialize your default lang by using the browser langage. const userLang = navigator.language || navigator.userLanguage; – Yanis-git Commented Apr 30, 2019 at 7:51

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

This is the right behavior. You can use localStorage (or other place) to store the selected language.

You can use localStorage to store the value in device memory, the following is an example

 // function select language
  selectLanguage(i: number) {
    this.lag = this.languages[i];
    this.translateService.use(this.languages[i].title.toLowerCase());
    localStorage.setItem("language",this.languages[i].title.toLowerCase());
  }

Angular service lives entirely in memory. If you want to add a persistence you should save current value to the localStorage on a language change or save this setting to the server

本文标签： javascriptAngular 7 ngxtranslate doesn39t remember the language after refreshStack Overflow