Angular ngx-translate 保存选择的语言

Question

我有这样的问题我使用 ngx-translate 进行翻译。 当我选择一种语言时，它会保存在 localStorage 中，但是当我刷新页面时，它会消失并返回我写的键。 当您转到另一个页面并更新它时，同样的问题会将密钥返回给我。

这是标题组件代码，我用它来将所选语言保存到 localStorage 并添加语言。

constructor(public translate: TranslateService) {
translate.addLangs(['kz', 'ru']);
if (localStorage.getItem('locale')) {
 const browserLang = localStorage.getItem('locale');
 translate.use(browserLang.match(/kz|ru/) ? browserLang : 'kz');
} else {
localStorage.setItem('locale', 'kz');
translate.setDefaultLang('kz');}}

changeLang(language: string) {
localStorage.setItem('language', language);
this.translate.use(language);}

而这个 header.html 我将在哪里选择语言

<select #langSelect (change)="changeLang(langSelect.value)">
          <option *ngFor="let lang of translate.getLangs()" [value]="lang"
                  [selected]="lang === translate.currentLang">{{ lang }}
          </option>
        </select>

这是我如何使用的示例

<div class="tur1 pt-5">
    <h1>{{ 'apply.tur1' | translate }}</h1>
    <p>{{ 'apply.paragraph1' | translate }}</p>
    <h1>{{ 'apply.date1' | translate }}</h1>
</div>

但是有这样一个时刻，header.html 仅在主页上使用，而在其他页面上不使用。 而且当你更新主页时，翻译不会消失，但是在另一个页面上，翻译会消失并给我一个翻译键

Answer 1

尝试在模块中导入翻译模块时添加默认语言，如下所示：

imports : [
...
TranslateModule.forChild({
  defaultLanguage: localStorage.getItem('locale') || 'en',
}),
...
]

Answer 2

希望这就是您要查找的内容，它会检查是否在 localStorage 中找到了名称为locale的任何键，如果不是这种情况，它将默认为kz ，就像您的情况一样：

<select #langSelect (change)="changeLang(langSelect.value)">
    <option *ngFor="let lang of translate.getLangs()" [value]="lang"
        [selected]="lang === translate.currentLang">{{ lang }}
    </option>
</select>

constructor(public translate: TranslateService) {
    translate.addLangs(['kz', 'ru']);
    if (localStorage.getItem('locale')) {
        translate.setDefaultLang(localStorage.getItem('locale'));
        translate.use(localStorage.getItem('locale'));
    } else {
        translate.setDefaultLang('kz');
        translate.use('kz');
        localStorage.setItem('locale', 'kz');
    }
}

changeLang(language: string) {
    this.translate.use(language)
    this.translate.setDefaultLang(language)
    localStorage.setItem('locale', language)
}