使用 ngx-translate 在 Ionic/Angular 應用程序中設置語言時遇到問題

Question

我有一個使用兩種語言的 Angular/Ionic 應用程序：

en_US
es_MX

這是我目前的環境：

Ionic:

   Ionic CLI                     : 6.16.1 (/Users/me/.nvm/versions/node/v14.17.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.2.3
   @angular-devkit/build-angular : 0.901.11
   @angular-devkit/schematics    : 9.1.11
   @angular/cli                  : 9.1.15
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 6 other plugins)

Utility:

   cordova-res                          : 0.15.3
   native-run (update available: 1.4.0) : 1.3.0

System:

   Android SDK Tools : 26.1.1 (/Users/me/Library/Android/sdk)
   ios-deploy        : 1.11.4
   ios-sim           : 8.0.2
   NodeJS            : v14.17.0 (/Users/me/.nvm/versions/node/v14.17.0/bin/node)
   npm               : 6.14.13
   OS                : macOS Catalina
   Xcode             : Xcode 12.4 Build version 12D4e

我創建了兩個語言 .json 文件並將它們添加到我的 /assets/i18n 文件夾中以進行翻譯。

我設置了我的app.module.ts文件，我將默認語言設置為en_US如下所示：

this.translate.setDefaultLang("en_US");

我有一個默認加載的啟動畫面，它會提示用戶他們希望使用哪種語言查看應用程序：

setLang(lang:string) {
    console.log(lang);
    this.translate.use(lang);
    this.router.navigateByUrl('/app/tabs/home', { replaceUrl: true });
  }

這會在整個應用程序中正確設置語言，但是，在我的首選項中，我讓他們可以選擇將語言設置回不同的選擇：

updateAppLanguage() {
    console.log(this.appLanguage);
    this.translate.use(this.appLanguage);
}

如果我在啟動es_MX中將語言設置為es_MX ，那么當我在首選項中更新我的語言時，它會按預期工作。 每次都會切換語言。

但是，如果我在啟動en_US中將語言設置為en_US ，那么當我在首選項中更新語言時，語言根本不會切換。 它在整個應用程序中保持英語。

關於我應該在哪里嘗試並解決這個問題的任何想法？ 我沒有在控制台或通過 linting 看到任何錯誤。

Answer 1

我想通了這個問題。

我注意到在我的首選項中更改語言時， es_MX會返回一個空結果。

看起來語言沒有被預加載。

為了修復，在我的preferences.module.ts .module.ts 中，我將其添加到模塊導入中：

import { HttpLoaderFactory } from '../../../app.module';

TranslateModule.forChild({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),