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
複製代碼

1、安裝

在安裝以前須要確認本身使用的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
複製代碼

2、使用前端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>
複製代碼

3、從後臺請求須要的翻譯模板

若是不想在前臺配置翻譯模板的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;
    }
}
複製代碼

4、最終結果

1. 英文：

2. 中文

3. 完整代碼

完整代碼請查看github。

5、參考文獻

[1] ngx-translate官方Github