ionic2 基於ngx-translate實現多語言切換，翻譯
阿新 • • 發佈：2017-05-17
click create -a fault template con 設置 切換 使用
/* *//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)
]
})介紹 ngx-translate 是Angular 2+的國際化（i18n）庫，在github的地址是箭頭 https://github.com/ngx-translate/core
將ngx-translate 使用與ionic2 項目中，實現多語言的切換。
1.安裝ng2-translate
在命令提示符中進入到項目目錄下，輸入以下 回車。
npm install ng2-translate --save
2.導入TranslateModule
首先導入TranslateModule
在app.module.ts 下添加以下代碼
import { HttpModule, Http } from [email protected]圈起來的就是添加的代碼
3.添加語言包
在src/assets 下新建文件夾i18n，在i18n文件夾下添加 en.json ,tw.json,zh.json 這三個json文件。
並添加內容
en.json
{
"HOME": {
"TITLE":"Home",
"CONTENT":"Hello word!"
}
}
tw.json
{
"HOME": {
"TITLE":"首頁",
"CONTENT":"你好，世界！"
}
}
zh.json
{ "HOME": { "TITLE":"首頁", "CONTENT":"你好，世界！" } }
3.用法
打開文件app.component.ts，添加代碼
translate.setDefaultLang(‘en‘); // 設置默認的語言包
並導入
import { TranslateService } from ‘ng2-translate‘;
在頁面裏，這樣使用
home.html
<ion-header> <ion-navbar> <ion-title>{{ ‘HOME.TITLE‘ | translate }}</ion-title> </ion-navbar> </ion-header> <ion-content padding> <button (click)="ChangeLanguage()" ion-button color="light">設置語言</button> <h2>{{ ‘HOME.CONTENT‘ | translate }}</h2> </ion-content>
home.ts
import { Component } from [email protected]/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;
});
}
}
結果：
ionic2 基於ngx-translate實現多語言切換，翻譯