Angular 7 ngx-translate 不记得刷新后的语言答案

【问题标题】：Angular 7 ngx-translate doesn't remember the language after refreshAngular 7 ngx-translate 不记得刷新后的语言
【发布时间】：2021-07-13 02:53:52
【问题描述】：

我们有一个 Angular 应用程序，它有两种语言。默认为德语，另一种为英语。我们使用ngx-translate 作为translateService。

当您刷新浏览器时，应用程序会切换回默认语言。

switchLang() 函数在我们的导航栏中被调用：

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

component.ts：

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

还有语言服务：

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);
  }
}

translateService 是 ngx-translate。

【问题讨论】：

好吧，你没有把它保存在任何地方。当您刷新页面时，整个应用程序会重新编译。
我认为 ngx-translate 有一个内置的方法。我认为localStorage是方向
我还建议您使用浏览器语言来初始化您的默认语言。 const userLang = navigator.language || navigator.userLanguage;

标签： javascript angular typescript ngx-translate

【解决方案1】：

这是正确的行为。您可以使用 localStorage（或其他地方）来存储选择的语言。

【讨论】：

我看到翻译有自己的存储空间。如果我想在每个翻译管道（... | translate）上从本地存储中获取数据，而不改变太多代码（认为有一个属性）怎么办。另外 - 使用 translateService.setTranslation(....) 将自动使用“LocalStorage”数据库。

【解决方案2】：

您可以使用localStorage将值存储在设备内存中，以下是一个示例

 // 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());
  }

【讨论】：

【解决方案3】：

Angular 服务完全存在于内存中。如果要添加持久性，则应在语言更改时将当前值保存到 localStorage 或将此设置保存到服务器

【讨论】：