angular项目如何配置国际化（i18n）？

1、下载ngx-translate的依赖库

//利用npm来安装ngx-translate依赖

npm install @ngx-translate/core --save

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

2、在项目根模块app.module.ts中引入引入TranslateModule模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Http } from '@angular/http';

//引入TranslateModule模块
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';

//配置i18n
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({//配置i18n
      loader: {
          provide: TranslateLoader,
          useFactory: createTranslateLoader,
          deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3、注入TranslateService 服务

【3.1】可在app.module.ts文件中注入TranslateService

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

【3.2】

import { BrowserModule } from '@angular/platform-browser';
import {Inject, LOCALE_ID, NgModule} from '@angular/core';

import { AppComponent } from './app.component';
import {HttpClient, HttpClientModule} from "@angular/common/http";
import {IonicModule} from "@ionic/angular";
import {CookieModule} from "ngx-cookie";
import {AppRoutingModule} from "./app-routing.module";
import { MyHomeComponent } from './components/my/my-home/my-home.component';
import {TranslateHttpLoader} from "@ngx-translate/http-loader";
import {TranslateLoader, TranslateModule, TranslateService} from "@ngx-translate/core";
import {environment} from "../environments/environment";
import { ProductListComponent } from './components/loan/product-list/product-list.component';



export function TranslateLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, "./assets/i18n/", "/loan.json?time=" + new Date().getTime());
}

export function LocaleIdFactory() {
  return navigator.language;
}

@NgModule({
  declarations: [
    AppComponent,
    MyHomeComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    AppRoutingModule,
    IonicModule.forRoot(),
    CookieModule.forRoot(),
    TranslateModule.forRoot({//translateModule配置
      loader: {
        provide: TranslateLoader,
        useFactory: TranslateLoaderFactory,
        deps: [HttpClient]
      }
    }),
    DirectiveModule
  ],
  providers: [
    {
      provide: LOCALE_ID,
      useFactory: LocaleIdFactory
    },
    EnvService,
    RestService,
    ToastService,
    UserService,
    JanusMobileService,
    PoseidonService,
    ToolService,
    ModalService,
    LocalApiService
  ],
  entryComponents: [ModalTemplateComponent],
  bootstrap: [AppComponent]
})
//全局可使用
export class AppModule {
  constructor(private i18n: TranslateService, @Inject(LOCALE_ID) locale: string) {
    if (environment.supportedLocale.indexOf(locale) === -1) {
      locale = "en-US";
    }

    this.i18n.use(locale);
  }
}

4、创建 国际化json文件：

根据根模块app.module.ts的配置，我们应该在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')

zh_CN.json

{
    "app.tab.loan": "借款",
    "app.tab.my": "还款",
    "common.btn.agree": "同意",
    "hestia.department.detail.title":"部门详情 - {{name}}"
}

en_US.json

{
    "app.tab.loan": "loan",
    "app.tab.my": "payment",
    "common.btn.agree": "agree",
    "hestia.department.detail.title":"Department - {{name}}"
}

5、使用i18n

在component页面中使用：
<ion-label>{{"app.tab.loan" | translate}}</ion-label>

参数形式：
<app-page-title>
        {{"hestia.department.detail.title" | translate: {name: department?.name} }}
</app-page-title>