my ionic3我爱编程ionic+cordova

ionic 工程 国际化

2018-02-27  本文已影响50人  Gaizka

npm install @ngx-translate/core --save

npm install ng2-translate --save

3.添加语言包

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

并添加内容(只写了 zh 作为例子):

zh.json{ 

  "HOME": {

  "TITLE":"首页",

  "CONTENT":"你好,世界!"

  }

}

工程配置:

3.用法

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

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

并导入

import { TranslateService } from 'ng2-translate';

home.html中使用: 

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;

    });

  }

}

项目用到 简单的demo,如果有错误请您提示。

上一篇下一篇

猜你喜欢

热点阅读