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

Posted 2020-09-18 huangenai

介绍 ngx-translate 是Angular 2+的国际化（i18n）库，在github的地址是箭头 https://github.com/ngx-translate/core

将ngx-translate  使用与ionic2 项目中，实现多语言的切换。

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文件。

并添加内容

en.json

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

tw.json

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

zh.json

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

3.用法

打开文件app.component.ts，添加代码

 translate.setDefaultLang(\'en\'); // 设置默认的语言包

并导入

import { TranslateService } from \'ng2-translate\';

在页面里，这样使用

home.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>

home.ts

import { Component } from \'@angular/core\';
import { NavController, AlertController } from \'ionic-angular\';
import { TranslateService } from \'ng2-translate\';
@Component({
  selector: \'page-home\',
  templateUrl: \'home.html\'
})
export class HomePage {
  RadioOpen: boolean;
  RadioResult;
  langs: [{}];
  constructor(public navCtrl: NavController, public alerCtrl: AlertController, public translate: TranslateService) {

  }

  ChangeLanguage() {
    this.langs = [{ language: "English", type: "en" }, { language: "简体中文", type: "zh" }, { language: "繁体中文", type: "tw" }]

    let alert = this.alerCtrl.create();
    alert.setTitle(\'语言选择\');
    for (let lang of this.langs) {
      alert.addInput({
        type: \'radio\',
        label: lang["language"],
        value: lang["type"],
        checked: (lang["type"] == this.translate.getDefaultLang() ? true : false)
      });
    }
    alert.addButton(\'取消\');
    alert.addButton({
      text: \'确认\',
      handler: data => {
        this.RadioOpen = false;
        this.RadioResult = data;
        this.translate.setDefaultLang(data);
        this.translate.use(data);
      }
    });

    alert.present().then(() => {
      this.RadioOpen = true;
    });
  }

}

结果：