angular国际化实践(ngx-translate)

 
本篇文章介绍的方法并非是浏览器识别翻译，它可以根据您的要求实现不同语言的精准翻译，不同于angualr官方的实现方式。

一、利用npm下载ngx-translate的依赖库

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

• 注意：请选择与您的angular版本相对应的版本，具体可参考下面截图（来自ngx-translate官网）

  
  
  Choose the version corresponding to your Angular version

二、引入TranslateModule模块

• 在项目根模块(app.module.ts)中导入支持的包

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

• 在项目根模块中配置ngx-translate

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Http } from '@angular/http';
import {
  TranslateModule,
  TranslateLoader,
} from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppComponent } from './app.component';
import {HttpClient, HttpClientModule} from '@angular/common/http';
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
          provide: TranslateLoader,
          useFactory: createTranslateLoader,
          deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 在需要使用ngx-translate的module引入TranslateModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
import { LoginRoutingModule } from './login-routing.module';

@NgModule({
  imports: [
    CommonModule,
    TranslateModule,
    LoginRoutingModule,
  ]
})
export class LoginModule { }

三、注入TranslateService 服务

• 在需要用到的component里面注入TranslateService

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

• 通过服务设置当前应用的语言

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

四、创建国际化文件

• 根据根模块的配置，在assets文件中再创建一个文件夹i18n，然后在i18n的文件夹下创建国际化文件，可以是en-US.json(英文)、zh_CN.json(中文)、es_ES.json(西班牙)，this.translate.use('en-US')用的就是en-US.json翻译文件，如果要使用其他两个翻译文件就是this.translate.use('zh_CN')、this.translate.use('es_ES')

// en-US.json
 
{
    "welcome":"welcome to this app",
    "getName":"hello I am {{name}}"
}
// zh_CN.json
 
{
    "welcome":"欢迎使用本应用",
    "getName":"你好，我是{{name}}"
}

五、国际化的具体应用

• 使用管道来翻译输入信息

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

• 使用指令来翻译指定信息

<span [translate]="'welcome'">welcome</span>

• 使用服务翻译指定信息

import {TranslateService} from '@ngx-translate/core';
constructor(private translate: TranslateService) {}
this.translate.get('welcome').subscribe((res: string) => {
      console.log(res); // welcome to this app
      this.welcomeTranslate = res;
});

• 对带参数的信息进行翻译--翻译管道中带参数

<span>{{"getName" | translate: {name:"crk"} }}</span>

• 对带参数的信息进行翻译--翻译指令带参数

<span
  [translate]="getName"
  [translateParams]="{'name':'ggg'}">
  getName
</span>

• 对带参数的信息进行翻译--翻译服务带参数

import {TranslateService} from '@ngx-translate/core';
constructor(private translate: TranslateService) {}
this.translate.get('getName',this.param).subscribe((res: string) => {
    console.log(res);
    this.getNameTranslate = res;
});

注意：项目中如果对http的request请求进行封装，应避免对加载国际化文件产生影响，例如

  const regex = new RegExp('^(http://|https://|//)');
     // 排除对国际化文件请求的封装
    if (!regex.test(url) && url.indexOf('assets/i18n') === -1) {  
      url = this._apiSettings.baseUrl + url;
  }

 
以上，是因项目开发需要，参照一些文章在学习和应用ngx-translate的过程中所遇问题的一些总结，希望对您有所帮助！