angular2+国际化实践(ngx-translate方案)

背景

最近基于angular 4.4.3和ionic 3.7.1写了一个lazyload的小程序，做i18n的一些实践整理。

框架

angular@4.4.4, ionic@3.7.1, @ngx-translate/core@8.0.0, @ngx-translate/http-loader@2.0.0

导入

非懒加载模块部分

可以在AppModule或者自定义的公共组件模块中去加载TranslateModule。

比如：

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {TranslateModule} from '@ngx-translate/core';

@NgModule({
imports: [
BrowserModule,
TranslateModule.forRoot()
],
bootstrap: [AppComponent]
})
export class AppModule { }

或者:

@NgModule({
exports: [
CommonModule,
TranslateModule
]
})
export class SharedModule { }

这里要注意点：在AppModule中导入的时候，使用了forRoot()方法，但是在公共模块SharedModule中导入的时候，不能使用TranslateModule.forRoot()方法。这样可能会使得整个依赖注入树中存在多个TranslateModule的实例。如果有必要的话，倒是可以使用TranslateModule.forChild()方法.

懒加载模块中

在懒加载的模块中，我们需要使用下面的方式:

@NgModule({
imports: [
TranslateModule.forChild({
loader: {provide: TranslateLoader, useClass: CustomLoader},
compiler: {provide: TranslateCompiler, useClass: CustomCompiler},
parser: {provide: TranslateParser, useClass: CustomParser},
missingTranslationHandler: {provide: MissingTranslationHandler, useClass: CustomHandler},
isolate: true
})
]
})
export class LazyLoadedModule { }

因为懒加载模块可以使用独立的loader,compiler,parser，所以可以在这里进行额外配置，甚至可以使用isolate：true来要求创建一个独立的TranslateModule的实例。当然，也可以放弃这些特性，使用公共的实例。

配置TranslateModule

因为我们使用了ionic，所以需要在导入TranslateModule的时候做一些配置。

import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
/**
*// AoT like ionic requires an exported function for factories
*/
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
imports: [
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
})
],
bootstrap: [AppComponent]
})
export class AppModule { }

其中

./assets/i18n/

路径下有着一些json格式的国际化映射关系。

比如:有一个中文映射集:

zh.json

{
"sudoku": "数  独",
"Game Center": "游戏中心",
"Level": "等级",
"Kindergarten": "幼儿园",
"Pupil": "小学生",
"Junior": "初中生",
"Senior": "高中生",
"Bachelor": "学士",
"Master": "硕士",
"Doctor": "博士",
"Genius": "天才",
"Godlike": "半神",
"Legendary": "传说",
"Change": "换  题",
"Check": "检  查",
"Peek": "提  示",
"Congratulations":"恭 喜",
"Congratulations_MSG":"恭喜完成此道数独，你很棒棒哟^_^",
"Sorry":"抱 歉",
"Sorry_MSG":"你还没有正确地完成此道数独，要不再试试？XD",
"TryHarder":"下一难度",
"TryMore":"再来一题",
"Cancel":"取消",
"OK":"确认"
}

初始化TranslateService

可以以依赖注入的方式获取到TranslateService的实例，进行初始化之后就可以直接当作管道使用。

初始化：

constructor(public translate:TranslateService){
let browserLang = translate.getBrowserLang();
translate.use(browserLang.match(/en|zh/) ? browserLang : 'en');
// translate.use('en');
}

当管道使用:

<ion-header>
<ion-navbar color="primary">
<ion-title >
<span class="lsp1px">{{'Game Center'|translate}}</span>
</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
<ion-list>
<ion-card *ngFor="let item of games" (click)="gotoGame(item.page)">
<img class="game-icon" [src]="item.img">
<button ion-button full color="secondary"><span class="lsp1px">{{item.name|translate}}</span></button>
</ion-card>
</ion-list>
</ion-content>

直接调用API进行转化:

check() {
if (SudokuChecker.checkMatrix(this.matrix)) {
this.uiService.presentAlert({
title: this.translate.instant("Congratulations"),
message: this.translate.instant("Congratulations_MSG"),
buttons: [
{
text: this.translate.instant("TryHarder"),
handler: () => {
this.level++;
this.initPuzzle();
}
},{
text:  this.translate.instant("TryMore"),
handler: () => {
this.initPuzzle();
}
}, {
text:  this.translate.instant("Cancel"),
handler: () => {
return;
}
}
]
});
} else {
this.uiService.presentAlert({
title: this.translate.instant("Sorry"),
message: this.translate.instant("Sorry_MSG"),
});
}
}

这里调用了instant()方法。

附录

完整项目代码：

https://github.com/ACEsLegendary/sudoku

项目演示:

https://aceslegendary.github.io/sudoku-demo

ngx-translate资源:

https://github.com/ngx-translate/core