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

}

});

}

總結

以上是生活随笔為你收集整理的ionic2 html 转义,ionic2 基于ngx-translate实现多语言切换，翻译的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。