ionic 工程 国际化

作者: Gaizka | 来源:发表于2018-02-27 09:40 被阅读50次

    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,如果有错误请您提示。

    相关文章

      网友评论

        本文标题:ionic 工程 国际化

        本文链接:https://www.haomeiwen.com/subject/fdlpxftx.html