介绍 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)
  ]
})

围绕起来的虽是添加的代码

图片 1

3.添加语言包

当src/assets 下新建文件夹i18n,在i18n文件夹下补充加 en.json
,tw.json,zh.json 这三个json文件。

图片 2

连累加内容

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';

图片 3

每当页面里,这样用

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;
    });
  }

}

结果:

图片 4

相关文章

网站地图xml地图