官网：https://github.com/ngx-translate/core

安装时注意版本。参考官方版本说明。

1、安装

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

2、使用

a. 在./assets/i18n/下创建两个文件 zh-CN.json, en.json

b. app.module.ts

.
.
.
// 为AOT准备
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
.
.
.

.
.
.
imports: [
    BrowserModule, BrowserAnimationsModule, HttpClientModule, AppRoutingModule,  CommonsModule, 
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    })
  ],
  
.
.
.

c. 在app.component.ts 中初始化

constructor(private translate: TranslateService){ 
    translate.addLangs(['zh-CN', 'en']);

    translate.setDefaultLang('zh-CN'); // 默认语言
    translate.use('zh-CN'); // 设置语言
}

d. 如果使用公共的module，需要在公共module中import，并且export TranslateModule

@NgModule({
  imports: [..., TranslateModule
  .
  .
  .
  exports:[..., TranslateModule]
  .
  .
  .

e. 页面使用

<span class="ui-inputgroup-label">{{'name' | translate}}</span>
-- 对应json，zh-CN
{
    "name":"姓名"
}

可以加前缀分类
<span class="ui-inputgroup-label">{{'user.name' | translate}}</span>
-- 对应json，zh-CN
{
    "user":{
        "name":"姓名"
    }
}

f. 代码中使用，比如修改浏览器标题

translate.get(title).subscribe(res => {
    this.titleService.setTitle(res);
});

-- 对应json
{
    "title":"我是浏览器标题"
}

g. 写一个下拉框自由选择语言

<app-combobox [dataProvider]="langs" (change)="changeLang($event)"></app-combobox>

langs = [
    {label:'中文', 'value':'zh-CN'},
    {label:'English', 'value':'en'},
];

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