ionic2 基于ngx-translate实现多语言切换,翻译
2018-05-14 本文已影响37人
亦久亦韭
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)
]
})
3.添加语言包
在src/assets 下新建文件夹i18n,在i18n文件夹下添加 en.json ,tw.json,zh.json 这三个json文件。
833855-20170517153705682-1729067632.png
en.json
{
"HOME": {
"TITLE":"Home",
"CONTENT":"Hello word!"
}
}
zh.json
{
"HOME": {
"TITLE":"首页",
"CONTENT":"你好,世界!"
}
}
再次声明下,如果使用的是懒加载的情况,需要在home.module.ts里声明下
QQ截图20180514113445.png
4.用法
打开文件app.component.ts,添加代码
translate.setDefaultLang('en'); // 设置默认的语言包
import { TranslateService } from 'ng2-translate';
constructor(translate: TranslateService) {
translate.setDefaultLang('en');
}
在页面里,这样使用
home.html
第一种
<ion-header>
<ion-navbar>
<ion-title>{{ 'HOME.TITLE' | translate }}</ion-title>
</ion-navbar>
</ion-header>
第二种
<ion-item>
<ion-label class="icon icon-user"></ion-label>
<!-- 在节点属性上调用 -->
<ion-input type="text" [placeholder]=" 'HOME.TITLE' | translate "></ion-input>
</ion-item>
在home.ts
第一种
this.translate.get("LOGIN.EMAIL_NULL").subscribe(value => {
this.native.showToast(value);
});
第二种
this.translate.instant("ALL.CAMERT");
instant方法的参数和返回类型与get方法一致,与get方法不同的是该方法是同步的,当lang改变时,是无法即时更新的。大多数时候,instant方法可以满足我们的使用需求,可是在页面缓存的情况下,比如动态的标签栏,无法动态刷新。解决办法如下:
ionViewDidLoad() {
this.listenLangChange();
}
// 当切换本地语言的时候,tabs标签栏各项子标题需手动切换
listenLangChange() {
this.translate.onLangChange
.subscribe(() => {
// 写法一
for(let tab of this.tabs) {
tab.title = this.translate.instant(`tabsPage.${tab.name}`);
}
// 写法二
let titles = this.translate.instant("tabsPage");
for(let tab of this.tabs) {
tab.title = titles[ tab.name ];
}
});
}