在Angular 6.x 中使用ngx-translate组件进行国际化

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhy13087344578/article/details/83141008

前言：ngx-translate组件是适配于Angular 2及以上的，主要版本的适配如下：

Angular	@ngx-translate/core	@ngx-translate/http-loader
6	10.x+	3.x+
5	8.x to 9.x	1.x to 2.x
4.3	7.x or less	1.x to 2.x
2 to 4.2.x	7.x or less	0.x

1、导入模块

app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {TranslateModule} from '@ngx-translate/core';

@NgModule({
    imports: [
        BrowserModule,
        TranslateModule.forRoot()
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

2、页面所在的模块 (如果该项目只有一个根模块，则这步可以忽略)

pages.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import { TranslateModule,TranslateLoader } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

// 如果只有根模块，则将这一步放置app.module.ts中，之所以放这里是为了分模块加载翻译对象
export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/lang/', '.json');
}

@NgModule({
    imports: [
        BrowserModule,
        TranslateModule.forChild({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        })
    ],
    bootstrap: [AppComponent]
})
export class OtherModule { }

3、翻译的JSON文件

JSON文件内容如下
en.json

{
  "COMPONENT": {
   ...
  },
  "AUTH": {
    "LOGIN": "Login",
  ...
  }

zh.json

{
  "COMPONENT": {
   ...
  },
  "AUTH": {
    "LOGIN": "登录",
  ...
  }

4、页面中使用

html
<div>{{'AUTH.LOGIN' | translate }}</div>
or
<div  [translate]="  'AUTH.LOGIN'  "  ></div>