?
本篇文章介紹的方法并非是瀏覽器識別翻譯池充，它可以根據(jù)您的要求實現(xiàn)不同語言的精準翻譯哄辣，不同于angualr官方的實現(xiàn)方式睬关。
一逮矛、利用npm下載ngx-translate的依賴庫
npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save
-
注意：請選擇與您的angular版本相對應(yīng)的版本矮燎，具體可參考下面截圖（來自ngx-translate官網(wǎng)）
Choose the version corresponding to your Angular version
二定血、引入TranslateModule模塊
- 在項目根模塊(app.module.ts)中導(dǎo)入支持的包
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 服務(wù)
- 在需要用到的component里面注入TranslateService
import {TranslateService} from '@ngx-translate/core';
- 通過服務(wù)設(shè)置當前應(yīng)用的語言
constructor(private translate: TranslateService) {
this.translate.use('en-US');
}
四诞外、創(chuàng)建國際化文件
- 根據(jù)根模塊的配置澜沟，在assets文件中再創(chuàng)建一個文件夾i18n，然后在i18n的文件夾下創(chuàng)建國際化文件峡谊，可以是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":"歡迎使用本應(yīng)用",
"getName":"你好贤壁，我是{{name}}"
}
五悼枢、國際化的具體應(yīng)用
- 使用管道來翻譯輸入信息
<span>{{ 'welcome '| translate}}</span>
- 使用指令來翻譯指定信息
<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;
});
- 對帶參數(shù)的信息進行翻譯--翻譯管道中帶參數(shù)
<span>{{"getName" | translate: {name:"crk"} }}</span>
- 對帶參數(shù)的信息進行翻譯--翻譯指令帶參數(shù)
<span
[translate]="getName"
[translateParams]="{'name':'ggg'}">
getName
</span>
- 對帶參數(shù)的信息進行翻譯--翻譯服務(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;
});
注意：項目中如果對http的request請求進行封裝，應(yīng)避免對加載國際化文件產(chǎn)生影響脾拆，例如
const regex = new RegExp('^(http://|https://|//)');
// 排除對國際化文件請求的封裝
if (!regex.test(url) && url.indexOf('assets/i18n') === -1) {
url = this._apiSettings.baseUrl + url;
}
?
以上馒索，是因項目開發(fā)需要，參照一些文章在學(xué)習(xí)和應(yīng)用ngx-translate的過程中所遇問題的一些總結(jié)名船，希望對您有所幫助绰上！
