ionic2 html 转义,ionic2 基于ngx-translate实现多语言切换，翻译

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

第一种

{{ 'HOME.TITLE' | translate }}

第二种

在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 ];

}

});

}