angular8.x + ngx-translate實現國際化

本文將介紹ngx-translate在angular8.x中的使用，主要內容有ngx-translate的安裝、前端json翻譯模板的配置以及如何改造為請求后台獲取翻譯模板json。完成后整體應用文件目錄結構如下：

|- src
|- |- app
|- |- |- app.component.css
|- |- |- app.component.html
|- |- |- app.component.ts
|- |- |- app.module.ts
|- |- assetss
|- |- |- i18n
|- |- |- |- en.json
|- |- |- |- zh.json
|- |- index.html
|- |- mian.ts
|- |- polyfills.ts
|- |- style.css
|- angular.json
|- package.json

一、安裝

在安裝之前需要確認自己使用的angular的版本，不同的版本的angular可能對應不同的ngx-translate的版本。本文使用的angular版本為8.0.0。安裝版本說明如下：

Angular	@ngx-translate/core	@ngx-translate/http-loader
7/8	11.x+	4.x+
6	10.x	3.x
5	8.x to 9.x	1.x to 2.x
4.3	7.x or less	1.x to 2.x
2 to 4.2.x	7.x or less	0.x

此表格來源於ngx-translate官網，時間2019-12-1 11:16:28。

確認版本之后可以輸入如下命令安裝：

npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save

如需要指定特定的版本可以參考如下命令：

npm install @ngx-translate/core@11.x --save

二、使用前端json翻譯模板

1. 導入TranslateModule

要想在angular中使用ngx-translate，則必須將其在應用程序的根@NgModule中使用TranslateModule.forRoot()導入，forRoot靜態方法是同時提供和配置服務的約定。確保只在應用程序的根模塊中調用此方法，大多數情況下調用AppModule。如果需要在其他的module中使用，則需要在其他的module中使用imports: [..., TranslateModule],和exports:[..., 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 { }

2. 使用AoT

如果想要在使用AoT編譯的同時配置自定義的translateLoader，那么這邊的函數必須使用export修飾，即必須使用導出函數而不是內聯函數。現在AppModule中代碼需要改造為如下：

// 包的導入省略......
// AoT
export function createTranslateLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
  // import中必須導入HttpClientModule，否則會報錯'NullInjectorError: No provider for HttpClient!'
  imports:[ BrowserModule, FormsModule, HttpClientModule,
  TranslateModule.forRoot({
      loader: {
          provide: TranslateLoader,
          useFactory: (createTranslateLoader),
          deps: [HttpClient]
      }
  })],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

這邊的loader中的provide代表將TranslateLoader注入進來，而他的實現是由useFactory的createTranslateLoader來具體實現。

3. 配置json翻譯模板

在2中可以看到new TranslateHttpLoader(http, './assets/i18n/', '.json')時已經指定了翻譯模板的存放路徑，所以現在需要在assets默認靜態文件的存放目錄下新建名為i18n的文件夾，並在其下新建zh.json和en.json翻譯模板文件，如下：

// en.json
// 注意：json文件中不要寫注釋！！！否則會報錯
{
  "i18ntest":"Test Project For i18n",
  "hello": "Hello World !",
  "author":"author: {{value}}",
  "language":"language",
  "header": {
    "author": "Default.W"
  }
}

// zh.jsons
{
  "hello": "你好, 世界!",
  "i18ntest":"測試項目(i18n)",
  "author":"作者： {{value}}",
  "language":"語言",
  "header": {
    "author": "Default.W"
  }
}

4. 使用

在AppComponent中使用，需要先將TranslateService導入進來，並且在構造函數處注入：

constructor(public translateService: TranslateService) {
    this.translateService.setDefaultLang('zh'); // 設置當前的默認語言類型
    this.translateService.use('zh'); // 設置使用的語言類型
}

現在就可以在html中使用管道進行翻譯了：

<h1>{{'i18ntest' | translate}}</h1>
<p>{{'hello' | translate}}</p>

翻譯還支持傳值的翻譯方式，html文件中的param為AppComponent中定義的變量：

// AppComponent
public param;
ngOnInit() {
    this.param = {value: 'Default.W'};
}

<!-- app.component.html -->
<p>{{"author" | translate:param}}</p>

三、從后台請求需要的翻譯模板

如果不想在前台配置翻譯模板的json文件，我們還可以在后端自行添加properties文件，並且不要自己寫好一個后台接口來請求這個配置文件並組裝成為json文件返回。在前端我們只需要將translate.loader.ts的中的TranslateLoader實現，並在實現中請求后端寫好的接口就可以切換為后台的json。

// 需要重新實現這個方法來請求后端接口
export abstract class TranslateLoader {
  abstract getTranslation(lang: string): Observable<any>;
}

實現代碼示例：

export class TranslateHttpLoader implements TranslateLoader {
    /**
    *  Get the translate from the service
    */
    public getTranslation(lang: string): Observable<Object> {
      	Subject subject = new Subject<any>();
        this.http.post(url).subscribe({
            next: res => {
                subject.next(res);
            },
            error: err => {
                console.log('獲取失敗');
            }
        });
        return subject;
    }
}

四、最終結果

1. 英文：

2. 中文

3. 完整代碼

完整代碼請查看github。

五、參考文獻

[1] ngx-translate官方Github