Angular ngx-translate 国际化实践（中文转英文）

1.安装包

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

2.根模块app.module.ts 引入

import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

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

3.在有需要的模块引入 TranslateModule

import { TranslateModule } from '@ngx-translate/core';
  imports: [
    TranslateModule,
  ]

4.新建语言转换文件

　　在assets新建文件夹 i18n，新建语言文件(名字自定义即可)：

　　

　　正常用en-Us.json 代表英文，内容如下

{
  "用户登录":"User Login",
  "账号":"Account",
  "密码":"Pwd",
  "验证":"Verify",
  "登录":"Login",
  "取消":"Cancel",
  "请滑动到":"Swipe to"
}

　　我们是中文转英文，所以

　　zh-CN.json 如下即可：

{

}

5.在component 注册服务和使用

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

  constructor(
    private translate: TranslateService
  ) {
    this.translate.use('en-US');
  }

　　1）无参：

　　三个方法

--管道翻译
<a>{{'用户登录'| translate}}</a>

--命令翻译
<a [translate]="'用户登录'"></a>

--服务翻译
cancel='取消'
ts：
    this.translate.get(this.cancel).subscribe((res: string) => {
      this.cancel = res;
    });
html：
<button mat-raised-button>{{cancel}}</button>

在属性上面使用，也是可以的，如下：
<input matInput type="text" [placeholder]="'账号'|translate" [(ngModel)]="acc">
<input matInput type="password" placeholder="{{'密码'| translate}}" [(ngModel)]="pwd">

　　2）有参：

　　修改 en-Us.json

{
  "用户登录":"User Login {{user}}",
  "取消":"Cancel {{ee}}",
}

　　同样是三个方法

--管道翻译
<a>{{'用户登录'| translate:{user:'kxy'} }}</a>

--命令翻译
<a [translate]="'用户登录'" [translateParams]="{user:'kxy'}"></a>

--服务翻译
cancel='取消'
ts：
    this.translate.get(this.cancel, { 'ee': '?' }).subscribe((res: string) => {
      console.log(res); // welcome to this app
      this.cancel = res;
    });
html：
<button mat-raised-button>{{cancel}}</button>

　　效果图展示：

　　

6.扩展：

　　可以将服务封装起来

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { Subscription } from 'rxjs';
import { DialogService } from 'src/app/dialog/dialog.service';

@Injectable({
  providedIn: 'root'
})
export class LanguageService {
  private _sub: Subscription = new Subscription();

  constructor(
    public router: Router,
    public translate: TranslateService,
    public ds: DialogService,
  ) {
  }

  ngOnDestroy() {
    console.log('ngOnDestroy')
    if (this._sub) { this._sub.unsubscribe(); }
  }
  iniLanguage(): string {
    let lang = window.localStorage.getItem('_language');
    if (lang == 'en-US') {
      this.translate.use('en-US');
      return 'English'
    }
    else {
      this.translate.use('zh-CN');
      return '中文'
    }
  }
  changeLanguage(nowLanguage: string, url: string) {
    if (nowLanguage == '中文') {
      this._sub.add(
        this.ds.openConfirm('是否切换到[English],切换后会刷新界面').subscribe(res => {
          if (res == 'yes') {
            window.localStorage.setItem('_language', 'en-US');
            this.router.navigateByUrl('/', { skipLocationChange: true }).then(
              () => {
                this.router.navigate([url]);
              }
            )
          }
        })
      )
    }
    if (nowLanguage == 'English') {
      this._sub.add(
        this.ds.openConfirm('Whether to switch to [中文], the interface will refresh after switching').subscribe(res => {
          if (res == 'yes') {
            window.localStorage.removeItem('_language');
            this.router.navigateByUrl('/', { skipLocationChange: true }).then(
              () => {
                this.router.navigate([url]);
              }
            )
          }
        })
      )
    }
  }
}

　　页面组件中仅需

  iniLanguage() {
    this.language = this.langService.iniLanguage();
    if (this.language == 'English') {
      for (let i = 0; i < this.menu.length; i++) {
        this.langService.translate.get(this.menu[i].desc as string).subscribe((res: string) => {
          this.menu[i].desc = res;
        });
      }
    }
  }
  changeLanguage(nowLanguage: string) {
    this.langService.changeLanguage(nowLanguage, '/plm');
  }

　iniLanguage() 最外层组件调用一次即可，无需所有组件都调用。

　对应的子组件子页面模块，如果无需用服务翻译，那仅需在模块中引入 TranslateModule即可使用pipe