本文將介紹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修飾，即必須使用導出函數而不是內聯函數?，F在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

總結

以上是生活随笔為你收集整理的angular8.x + ngx-translate实现国际化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。