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