?
本篇文章介紹的方法并非是瀏覽器識(shí)別翻譯，它可以根據(jù)您的要求實(shí)現(xiàn)不同語(yǔ)言的精準(zhǔn)翻譯，不同于angualr官方的實(shí)現(xiàn)方式。

一、利用npm下載ngx-translate的依賴庫(kù)

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

• 注意：請(qǐng)選擇與您的angular版本相對(duì)應(yīng)的版本，具體可參考下面截圖（來(lái)自ngx-translate官網(wǎng)）

  
  
  Choose the version corresponding to your Angular version

二、引入TranslateModule模塊

• 在項(xiàng)目根模塊(app.module.ts)中導(dǎo)入支持的包

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

• 在項(xiàng)目根模塊中配置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 服務(wù)

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

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

• 通過(guò)服務(wù)設(shè)置當(dāng)前應(yīng)用的語(yǔ)言

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

四、創(chuàng)建國(guó)際化文件

• 根據(jù)根模塊的配置，在assets文件中再創(chuàng)建一個(gè)文件夾i18n，然后在i18n的文件夾下創(chuàng)建國(guó)際化文件，可以是en-US.json(英文)、zh_CN.json(中文)、es_ES.json(西班牙)，this.translate.use('en-US')用的就是en-US.json翻譯文件，如果要使用其他兩個(gè)翻譯文件就是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":"歡迎使用本應(yīng)用",
    "getName":"你好，我是{{name}}"
}

五、國(guó)際化的具體應(yīng)用

• 使用管道來(lái)翻譯輸入信息

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

• 使用指令來(lái)翻譯指定信息

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

• 使用服務(wù)翻譯指定信息

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

• 對(duì)帶參數(shù)的信息進(jìn)行翻譯--翻譯管道中帶參數(shù)

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

• 對(duì)帶參數(shù)的信息進(jìn)行翻譯--翻譯指令帶參數(shù)

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

• 對(duì)帶參數(shù)的信息進(jìn)行翻譯--翻譯服務(wù)帶參數(shù)

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

注意：項(xiàng)目中如果對(duì)http的request請(qǐng)求進(jìn)行封裝，應(yīng)避免對(duì)加載國(guó)際化文件產(chǎn)生影響，例如

  const regex = new RegExp('^(http://|https://|//)');
     // 排除對(duì)國(guó)際化文件請(qǐng)求的封裝
    if (!regex.test(url) && url.indexOf('assets/i18n') === -1) {  
      url = this._apiSettings.baseUrl + url;
  }

?
以上，是因項(xiàng)目開(kāi)發(fā)需要，參照一些文章在學(xué)習(xí)和應(yīng)用ngx-translate的過(guò)程中所遇問(wèn)題的一些總結(jié)，希望對(duì)您有所幫助！