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注入進來,而他的實現是由useFactorycreateTranslateLoader來具體實現。

3. 配置json翻譯模板

在2中可以看到new TranslateHttpLoader(http, './assets/i18n/', '.json')時已經指定了翻譯模板的存放路徑,所以現在需要在assets默認靜態文件的存放目錄下新建名為i18n的文件夾,並在其下新建zh.jsonen.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. 英文:

en

2. 中文

zh

3. 完整代碼

完整代碼請查看github

五、參考文獻

[1] ngx-translate官方Github


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM