1.安裝ng2-translate

在命令提示符中進(jìn)入到項(xiàng)目目錄下裕照，輸入以下 回車。

npm install ng2-translate --save

2.導(dǎo)入TranslateModule

首先導(dǎo)入TranslateModule
在app.module.ts 下添加以下代碼

import { HttpModule, Http } from '@angular/http';
import { TranslateModule, TranslateLoader, TranslateStaticLoader } from 'ng2-translate';

export function createTranslateLoader(http: Http) {
  return new TranslateStaticLoader(http, './assets/i18n', '.json');
}

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

3.添加語言包

在src/assets 下新建文件夾i18n调塌，在i18n文件夾下添加 en.json ,tw.json,zh.json 這三個(gè)json文件晋南。

833855-20170517153705682-1729067632.png

en.json

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

zh.json

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

再次聲明下负间，如果使用的是懶加載的情況偶妖，需要在home.module.ts里聲明下

QQ截圖20180514113445.png

4.用法

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

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

import { TranslateService } from 'ng2-translate';
constructor(translate: TranslateService) {
     translate.setDefaultLang('en'); 
}

在頁面里政溃，這樣使用

home.html

第一種
<ion-header>
  <ion-navbar>
    <ion-title>{{ 'HOME.TITLE' | translate }}</ion-title>
  </ion-navbar>
</ion-header>
第二種
  <ion-item>
     <ion-label class="icon icon-user"></ion-label>
     <!-- 在節(jié)點(diǎn)屬性上調(diào)用 -->
     <ion-input type="text" [placeholder]=" 'HOME.TITLE' | translate "></ion-input>
   </ion-item>

在home.ts

第一種
 this.translate.get("LOGIN.EMAIL_NULL").subscribe(value => {
        this.native.showToast(value);
      });
第二種
this.translate.instant("ALL.CAMERT")趾访；
instant方法的參數(shù)和返回類型與get方法一致，與get方法不同的是該方法是同步的董虱，當(dāng)lang改變時(shí)扼鞋，是無法即時(shí)更新的。大多數(shù)時(shí)候愤诱，instant方法可以滿足我們的使用需求云头，可是在頁面緩存的情況下，比如動(dòng)態(tài)的標(biāo)簽欄淫半，無法動(dòng)態(tài)刷新溃槐。解決辦法如下：
ionViewDidLoad() {
        this.listenLangChange();
    }

    // 當(dāng)切換本地語言的時(shí)候，tabs標(biāo)簽欄各項(xiàng)子標(biāo)題需手動(dòng)切換
    listenLangChange() {
        this.translate.onLangChange
            .subscribe(() => {
                // 寫法一
                for(let tab of this.tabs) {
                    tab.title = this.translate.instant(`tabsPage.${tab.name}`);
                }
                // 寫法二
                let titles = this.translate.instant("tabsPage");
                for(let tab of this.tabs) {
                    tab.title = titles[ tab.name ];
                }
            });
    }