ionic2 基于ngx-translate实现多语言切换，翻译

1.安装ng2-translate

在命令提示符中进入到项目目录下，输入以下 回车。

npm install ng2-translate --save

2.导入TranslateModule

首先导入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 这三个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'); // 设置默认的语言包

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

在页面里，这样使用

home.html

第一种

  
    {{ 'HOME.TITLE' | translate }}
  

第二种
  
     
     
     
   

在home.ts

第一种
 this.translate.get("LOGIN.EMAIL_NULL").subscribe(value => {
        this.native.showToast(value);
      });
第二种
this.translate.instant("ALL.CAMERT")；
instant方法的参数和返回类型与get方法一致，与get方法不同的是该方法是同步的，当lang改变时，是无法即时更新的。大多数时候，instant方法可以满足我们的使用需求，可是在页面缓存的情况下，比如动态的标签栏，无法动态刷新。解决办法如下：
ionViewDidLoad() {
        this.listenLangChange();
    }

    // 当切换本地语言的时候，tabs标签栏各项子标题需手动切换
    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 ];
                }
            });
    }