Angular国际化-使用ngx-translate

1. 安装模块包

npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save

2. 在app.module.ts文件配置国际化模块

import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
//@NgModule
imports: [
    TranslateModule.forRoot({
      loader:{
      provide:TranslateLoader,
      useFactory:(createTranslateHttpLoader),
      deps:[HttpClient]
      }
  })
  ],
  export function createTranslateHttpLoader(http:HttpClient){
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

3. 在assets目录下创建包含需要国际化的字符串所对应的中英文文件

//zh.json
{
    "CPU_numbers": "CPU核数",
    "CPU_usage": "CPU使用率",
    "memory_size": "内存大小",
    "memory_usage": "内存使用率",
    "resource": "资源",
    "threshold_value": "阈值",
    "color": "颜色",
    "threshold_value_management": "阈值管理"

}
//en.json
{
    "CPU_numbers": "CPU numbers",
    "CPU_usage": "CPU usage",
    "memory_size": "memory size",
    "memory_usage": "memory usage",
    "resource": "resource" ,
    "threshold_value": "threshold value",
    "color": "color",
    "threshold_value_management": "threshold value management"
}

4.在需要国际化的组件中实现国际化（使用TranslateService的get方法异步实现，如果是对订阅的数据进行国际化，需先对订阅的数据进行国际化，然后再赋值。）

//依赖注入TranslateService
constructor(private jData:GetJsonDataService, private translate:TranslateService) {
            //添加语言支持
        this.translate.addLangs(["en", "zh"]); 
        //设置默认语言，一般在无法匹配的时候使用
        this.translate.setDefaultLang('zh');
    }
//因为是订阅的数据是异步获取的，所以必须要在订阅的数据接收到之后再国际化
private initData(): any {
        this.jData.getData().subscribe(data=>{
            this.translate.get(["CPU_numbers","CPU_usage","memory_size","memory_usage"]).subscribe( value => {
                data[0].resource=value.CPU_numbers;
                data[1].resource=value.CPU_usage;
                data[2].resource=value.memory_size;
                data[3].resource=value.memory_usage;
                this.data=data;
            });
        });
       }

5. 更改语言的方法

           changeLang(lang) {
            this.translate.use(lang);
          }