【ionic】 -国际化

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • perl: warning: Falling back to a fallback locale ("en_US....
    keaidelele阅读 1,081评论 0 50
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,398评论 19 139
  • rljs by sennchi Timeline of History Part One The Cognitiv...
    sennchi阅读 7,713评论 0 10
  • 我紧握夜的手指 听远方传来的安眠曲 星星亲吻着拍打在岩石上的海浪 凝望着月光 八音盒 旋转木马 天空之城 我觅着记...
    厘沫沫阅读 419评论 8 9
  • 问题: 一个很老的代码, 做inhouse发布, 发布成功之后iOS 11以下成功安装 iOS 11成功下载但是安...
    VeryView阅读 777评论 0 2

友情链接更多精彩内容