ionic3學習之集成 ngx-translate

集成 ngx-translate

官方鏈接

github：https://github.com/ngx-transl...

Step 1：

安裝

npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save

Step 2：

導入TranslateModule，首先導入TranslateModule 在 app.module.ts 下添加如下代碼

// 導入包
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

// 增長方法
// The translate loader needs to know where to load i18n files
// in Ionic's static asset pipeline.
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  imports: [
    BrowserModule,
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (createTranslateLoader),
      deps: [Http]
    }), 
    IonicModule.forRoot(MyApp)
  ]
})

Step 3 建立國際化文件

進入下面這個目錄：

cd ionicProject/src/assets

新建一個目錄爲 i18n

進入 i18n 目錄，建立json文件

• zh-cmn-Hans.json 簡體中文

{
  "HOME": {
   "TITLE":"首頁",
   "CONTENT":"你好，世界！"
  }
}

• zh-cmn-Hant.json 繁體中文

{
  "HOME": {
   "TITLE":"首頁",
   "CONTENT":"你好，世界！"
  }
}

• en.json 英文

{
  "HOME": {
   "TITLE":"Home",
   "CONTENT":"Hello word!"
  }
}

使用

打開文件app.component.ts，添加代碼

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


translate.setDefaultLang('en'); // 設置默認的語言包

官方的 start demo中的源碼優化

initTranslate() {
    // 根據瀏覽器來判斷字符集
    this.translate.setDefaultLang('zh-cmn-Hans');
    const browserLang = this.translate.getBrowserLang();

    if (browserLang) {
      if (browserLang === 'zh') {
        const browserCultureLang = this.translate.getBrowserCultureLang();

        if (browserCultureLang.match(/-CN|CHS|Hans/i)) {
          this.translate.use('zh-cmn-Hans');
        } else if (browserCultureLang.match(/-TW|CHT|Hant/i)) {
          this.translate.use('zh-cmn-Hant');
        }
      } else {
        this.translate.use(this.translate.getBrowserLang());
      }
    } else {
      // 設置翻譯
      this.translate.use('zh-cmn-Hans');
    }

  }

html

<ion-header>
  <ion-navbar>
    <ion-title>{{ 'HOME.TITLE' | translate }}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
   <button (click)="ChangeLanguage()" ion-button color="light">設置語言</button>
  <h2>{{ 'HOME.CONTENT' | translate }}</h2>
</ion-content>

注意：

對於這個問題，我找了很久。最開始都不知道怎麼處理了，看了好幾我的的博客，病了就亂投醫。最後看到官網上面的，才知道是版本問題。建議你們報錯了以後，先去官網上面看看有沒有說明。。。

If you're still using Angular v5, please use ngx-translate 9.x because
version 10 and above are only compatible with Angular v6. If you try
to use v10 with Angular v5 you will get an error message TypeError:
Object(...) is not a function

圖示：