Angular基于ngx-translate实现国际化流程

1、下载ngx-translate的依赖库

//利用npm来安装ngx-translate依赖
npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save

2、在项目根模块（app.module.ts）中配置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、创建语言JSON文件

在src/assets文件夹下创建i18n文件夹，文件夹下创建要翻译的语种JSON文件

JSON文件内容为要翻译的字段，例如

//en.json
{
    "appPage": {
        "language": "Language",
        "user":"User",
        "switchAccount": "Switch Account",
        "logOut": "Logout",
    }
}

//zh_cn.json
{
    "appPage": {
        "language": "语言",
        "user":"用户",
        "switchAccount": "切换用户",
        "logOut": "登出",
    }
}

4、配置语言

4.1、在需要用到的component里面注入TranslateService

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

4.2、设置当前应用的语言

constructor(
    private translate: TranslateService
  ){
    this.translate.use('en');
    // this.translate.use('zh_cn');
    // this.translate.use('zh_tw');
  }

5、页面需要翻译字段配置

<span>{{ 'appPage.logOut'| translate}}</span>

或

<span [translate]="'appPage.logOut'">Logout</span>