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