原文

https://www.jianshu.com/p/7d1da3098625

大綱

　　1、認識ngx-translate
　　2、ngx-translate的配置步驟
　　3、ngx-translate的使用方式
　　4、ngx-translate的使用註意方式

認識ngx-translate

　　ngx-translate的官網解釋是：The internationalization (i18n) library for Angular，即ngx-translate是一個用於angular項目的國際化庫。簡單的說，ngx-translate是angular項目的國際化功能而提供的依賴庫。
　　ngx-translate官網有對該插件的配置和使用方法的說明，如果有興趣精深的讀者可以去看看源碼，以下是我對ngx-translate使用的經驗。ngx-translate

ngx-translate的配置步驟

　　1、下載ngx-translate的依賴庫

//利用npm來安裝ngx-translate依賴
npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save

　　2、引入TranslateModule模塊

　　2.1、在項目根模塊中導入支持的包

import { TranslateModule, TranslateLoader } from ‘@ngx-translate/core‘;
import { TranslateHttpLoader } from ‘@ngx-translate/http-loader‘;
 

　　2.2 、在項目根模塊中配置ngx-translate

import { BrowserModule } from ‘@angular/platform-browser‘;
import { NgModule } from ‘@angular/core‘;
import { FormsModule } from ‘@angular/forms‘;
import { Http } from ‘@angular/http‘;
import { 
  TranslateModule, 
  TranslateLoader, 
  TranslateService 
} from ‘@ngx-translate/core‘;
import { TranslateHttpLoader } from ‘@ngx-translate/http-loader‘;
import { AppComponent } from ‘./app.component‘;
import {HttpClient, HttpClientModule} from ‘@angular/common/http‘;
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, ‘./assets/i18n/‘, ‘.json‘);
}
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
          provide: TranslateLoader,
          useFactory: createTranslateLoader,
          deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
 

3、註入TranslateService 服務

3.1、在需要用到的component裏面註入TranslateService

import {TranslateService} from ‘@ngx-translate/core‘;

3.2、通過服務設置當前應用的語言

constructor(
    private translate: TranslateService
  ){
    this.translate.use(‘en‘);
  }

4、創建國際化文件

　　根據根模塊的配置，我們應該在assets文件中再創建一個文件夾i18n，然後在i18n的文件夾下創建國際化文件，可以是en.json(英文)、zh_cn.json(中文)、zh_tw.json(中國臺灣)，this.translate.use(‘en‘)用的就是en.json翻譯文件，如果要使用其他兩個翻譯文件就是this.translate.use(‘zh_cn‘)、this.translate.use(‘zh_tw‘)

　　//en.json

{
    "welcome":"welcome to this app",
    "getName":"hello I am {{name}}"
}

　　//zh_cn.json

{
    "welcome":"歡迎使用本應用",
    "getName":"你好，我是{{name}}"
}

5、使用國際化

　　5.1、使用管道來翻譯輸入信息

<span>{{ ‘welcome ‘| translate}}</span>

　　5.2、使用指令來翻譯指定信息

<span [translate]="‘welcome‘">welcome</span>

　　5.3、使用服務翻譯指定信息

this.translate.get(‘welcome‘).subscribe((res: string) => {
            console.log(res);
            this.welcomeTranslate = res;
        });

　　5.4、對帶參數的信息進行翻譯

　　5.4.1、翻譯管道中帶參數

<span>{{getName | translate: {name:"crk"} }}</span>

　　5.4.2、翻譯指令帶參數

<span 
  [translate]="getName" 
  [translateParams]="{‘name‘:‘ggg‘}">
getName
</span>

　　5.4.3、翻譯服務帶參數

this.translate.get(‘getName‘,this.param).subscribe((res: string) => {
            console.log(res);
            this.getNameTranslate = res;
        });

需要註意

　　也許你根據我的教程走到這步，運行項目的時候會發現並沒有如願以償的達到效果，那麽是我的教程有問題嗎？並不是的，因為以上的步驟都是作者一步一步的操作過的，也許你根據網上的絕大部分的教程安裝配置都得不到理想的效果，如果達到了效果，那麽只能說你的運氣不錯。
為什麽這麽說呢？並不是作者為自己的博客無法滿足讀者的需求而找到的借口。之所以會出現這樣的原因是因為安裝的時候項目的環境可能有些問題。
下面是一種ngx-translate官網給出的相應的依賴庫對應的angular版本。

　　作者我本人的angular的版本是angular5，因此完整準確的下載依賴庫的代碼應該是如下所示：

//完整的npm下載依賴庫代碼
npm install @ngx-translate/core@8.x --save
npm install @ngx-translate/http-loader@1.x --save

　　就我根據源碼看到的7.x的方式是依賴於@angular/http庫中的http對象，但是8.x以及之後的卻是依賴於HttpClinet的依賴庫實現的，因此有時候版本對不上總是會出現一些奇奇怪怪的錯誤，那麽這時候就要檢查一下是因為代碼的原因或者有可能是因為版本不對的問題。

綜上

　　以上就是我對angular項目國際化配置（ngx-translate）的使用和理解，也許讀者自己做配置的時候沒有解決思路的時候會很著急，會很無奈。當這是自己探索angular框架時有遇到的，就像我遇到版本的問題的時候也是查找了很久，最後查到了官網看了源碼才發現了問題，最後解決問題的時候自己還是有點小滿足的。每一次問題的解決都是對我們自我的提升，哪怕也許最後沒有解決，我們也都曾努力過不是嗎。
這裏提供一下我實踐的代碼：angular實例中的angular-translate

angular項目國際化配置（ngx-translate）