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