angular4项目中使用i18n国际化

(1)npm 安装 ngx-translate 模块

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

(2)在 Angular 项目中进行配置

• 修改app.module.ts文件

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

import { AppComponent } from './app.component';

import {TranslateLoader, TranslateModule} from "@ngx-translate/core";
import {TranslateHttpLoader} from "@ngx-translate/http-loader";
import {HttpClient, HttpClientModule} from "@angular/common/http";

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, '../../../assets/i18n/', '.json');
}

@NgModule({
 declarations: [
      AppComponent
 ],
 imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    HttpClientModule,
    TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient]
         }
     })
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

• 修改app.component.ts文件

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

@Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(public translateService: TranslateService) {}

  ngOnInit() {
     // --- set i18n begin ---  
     // 添加语言支持
     this.translateService.addLangs(["zh", "en"]);
     // 设置默认语言，一般无法匹配的时候使用
     this.translateService.setDefaultLang("zh");
     const browserLang = this.translateService.getBrowserLang();
     this.translateService.use(browserLang.match(/zh|en/) ? browserLang : 'zh');
     // --- set i18n end ---
     // 也可以将语言存在缓存中，供切换语言时，其他模块同时读取到语言的变化
     // sessionStorage.setItem("language",'en');
  }
}

• 添加多语言文件

在 src/app/assets/ 下创建 i18n 文件夹，并在文件夹内创建 en.json 和 zh.json 文件

 --> assets
    --> i18n
         --> en.json
         --> zh.json

(3)分别在html及ts文件中使用（非模块化）

• 在en.json和zh.json文件中添加配置

  en.json
  {
   "hello": "hello",
   "attention": "attention",
   "hint1":"please enter name",
   "January": "January",
   "February": "February",
   "March": "March"
  }
  zh.json
  {
   "hello": "你好",
   "attention": "注意",
   "hint1":"请输入名称",
   "January": "一月",
   "February": "二月",
   "March": "三月"
  }

• 在html文件中使用

  <div>{{'hello' | translate}}</div>
  <input type="text" placeholder="{{ 'hint1'| translate }}" name="keyWords">
  <tr *ngFor="let data of list">
      <span>{{data.name | translate}}</span>
  </tr>
  <nz-transfer
      class="nz-transfer"
      [(nzDataSource)]="list"
      [nzListStyle]="{'width.px': 490, 'height.px': 450}"
      nzShowSearch
      [nzItemUnit] = "'hello'|translate"
      [nzItemsUnit] = "'attention'|translate"
      [nzTitles]="['hint1'|translate, 'hint1'|translate]"    
      (nzSelectChange)="select($event)"
      (nzChange)="change($event)">
  </nz-transfer>

• 在ts文件中使用
  

  this.translateService.instant("attention")
  

(4)分别在html及ts文件中使用（模块化）

• 在 en.json 和 zh.json 文件中添加配置

  en.json
  {
   "model1": {
     "hello": "hello",
     "attention": "attention",
     "hint1":"please enter name"
   },
   "model2": {
     "January": "January",
     "February": "February",
     "March": "March"
   }
  }
  zh.json
  {
   "model1": {
     "hello": "你好",
     "attention": "注意",
     "hint1":"请输入名称"
   },
   "model2": {
     "January": "一月",
     "February": "二月",
     "March": "三月"
   }
  }

• 在 html文件中使用

  <div>{{'model1.hello' | translate}}</div>
  <input type="text" placeholder="{{ 'model1.hint1'| translate }}" name="keyWords">
  <tr *ngFor="let data of list">
      <span>{{'model2.' + data.name | translate}}</span>
  </tr>
  <nz-transfer
      class="nz-transfer"
      [(nzDataSource)]="list"
      [nzListStyle]="{'width.px': 490, 'height.px': 450}"
      nzShowSearch
      [nzItemUnit] = "'model1.hello'|translate"
      [nzItemsUnit] = "'model1.attention'|translate"
      [nzTitles]="['model1.hint1'|translate, 'model1.hint1'|translate]"    
      (nzSelectChange)="select($event)"
      (nzChange)="change($event)">
  </nz-transfer>

• 在 ts文件中使用

this.translateService.instant("model1.attention")

(4)总结说明

本文为借鉴多个相关文档编写，并经过实际项目测试总结出的结果。