angular中使用ngx-translate国际化配置

需要安装@ngx-translate/core和@ngx-translate/http-loader这两个插件

在安装之前可以先看看npm上的文档说明>https://www.npmjs.com/package/@ngx-translate/core
其中有个要踩坑的地方非常要注意就是下载对应的angular版本使用，否则会报错，且看下图

image.png

以上是对应的版本要求，那么看看自己用的angular版本，我这里用的是@10.X

image.png

如果直接用 npm install @ngx-translate/core --save来安装，现在会默认安装@9.x,当初就是选择默认的安装，后面有错都很难找。
所以下面我们安装时带一个版本号，因为我用的是angular10，所以这里的版本号应为@13.x的，但是要查到具体版本号，需要差这个插件的更新日志>https://github.com/ngx-translate/core/releases

image.png

打开日志发现最新的为13.0.0,接下来我们开始安装

npm install @ngx-translate/core@13.0.0 --save

接下来我们安装另外一个插件

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

安装完成之后在入口文件app.moudle.js中进行配置

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');
}

...

@NgModule({
  imports: [
    HttpClientModule,//要先注入这个服务不然会报错
    TranslateModule.forRoot({
      loader: {
          provide: TranslateLoader,
          useFactory: (createTranslateLoader),
          deps: [HttpClient]
      }
  })
  ]
})

在assets中新建翻译文件资源i18n

image.png

要翻译多少种语言这里就新增几个json文件，这里暂时新增了两种
en,json

{
    "welcome":"welcome to this app",
    "getName":"hello I am {{name}}"
}

zh_cn.json

{
    "welcome":"欢迎使用本应用",
    "getName":"你好，我是{{name}}"
}

配置好了入口文件后，需要在需要用到的组件中y引入使用

先导入包文件

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

  constructor(private translate: TranslateService) {
    translate.setDefaultLang('zh_cn');
  }

在页面中使用

<span>{{ "welcome" | translate}}</span> 


<button (click)="checkLang('en')">英文</button><button (click)="checkLang('zh_cn')">中文</button>

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

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
  constructor(private translate: TranslateService) {
    translate.setDefaultLang('zh_cn');
  }

  ngOnInit(): void {
  }
  checkLang(str) {
    this.translate.setDefaultLang(str);
  }
}

运行之后的页面效果

截图录屏_选择区域_20201014205427.gif