Angular國際化中ngx-translate使用

• 背景
• • 插件使用
  • • 引用

背景

對于angular的插件我以前的做法就是上網(wǎng)找個例子然后拿過來就用，用完了框架怎么搭建進(jìn)來的，后期升級怎么處理就要重新去看去找。而且如果想優(yōu)化時一頭霧水。
寫代碼就像電視劇請回答1988中的臺詞一樣，人這一輩子，在自己的人生之紙上涂抹顏料，五彩斑斕、濃墨重彩，最終疊加成一紙漆黑。回憶模糊，再也想不出來當(dāng)時那些紅粉藍(lán)綠的筆痕，是以怎樣的姿態(tài)劃過白紙，又發(fā)出了何種聲響，沙啞還是清脆。都記不清了。仿佛那些多彩的故事，從來都沒有發(fā)生過，只是我美好的想象。
我理解關(guān)于程序的大意是程序本來就像一張白紙，你畫一些，他畫一些，最終變成一張黑紙，我們都看不清彼此的痕跡。

插件使用

導(dǎo)入ngx-translate
運(yùn)行下面命令安裝@ngx-translate/core和@ngx-translate/http-loader：

npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save
然后在根模塊（一般是app.module.ts）下引入TranslateModule

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import {HttpClient} from "@angular/common/http"; import {TranslateLoader, TranslateModule} from "@ngx-translate/core"; import {TranslateHttpLoader} from "@ngx-translate/http-loader"; import { AppComponent } from './app.component';

// 為AOT(Ahead-of-Time，預(yù)編譯)準(zhǔn)備

export function createTranslateLoader(http: HttpClient) {return new TranslateHttpLoader(http, './assets/i18n/', '.json'); }

這里使用了TranslateHttpLoader 來加載我們定義好的語言文件。"/assets/i18n/[lang].json"這里的lang就是當(dāng)前正在使用的語言。這里"/assets/i18n/[lang].json"在前后分離的項(xiàng)目中，如果想通過訪問后臺接口,可以在這里替換為以下。

//用于根據(jù)語言類型獲取頁面所有該語言的鍵值

export function createTranslateLoader(http: HttpClient, configProvider: ConfigProvider) {return new TranslateHttpLoader(http, `${configProvider.getWebApiUri()}api/Translate/GetValues?ValueType=`, ''); }

這里Translate/GetValues替換成你后臺代碼的Controller名/method名。
注意：如果當(dāng)前采用的是AOT編譯方式或者是ionic工程，那么useFactory對應(yīng)的必須是一個export的自定義方法而非內(nèi)聯(lián)方法。

@NgModule({imports: [BrowserModule,TranslateModule.forRoot({loader: {provide: TranslateLoader,useFactory: (createTranslateLoader),deps: [HttpClient]}})], declarations: [AppComponent],providers: [],bootstrap: [AppComponent] }) export class AppModule { }

如果Angular版本小于4.3，可以使用http-loader@0.1.0，并用@angular/http中的Http代替HttpClient。

為了方便在其他模塊下使用，在sharedModule下面導(dǎo)入TranslateModule：

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common';import {TranslateModule} from "@ngx-translate/core";const sharedModule = [CommonModule,TranslateModule ];@NgModule({imports: sharedModule,declarations: [],exports: sharedModule }) export class SharedModule { }

這樣在其他模塊下導(dǎo)入sharedModule就可以使用ngx-translate了。

使用ngx-translate
在/assets/i18n/目錄下新建en.json和zh.json兩個文件，如果用Angular-Cli新建的工程，默認(rèn)會有這兩個文件。這個目錄下的json文件名會作為ngx-translate中的語言名稱使用，比如translate.use(‘zh’)中的zh就是zh.json的文件名，如果json文件改成zh-CN，相應(yīng)代碼中的也要更改為translate.use(‘zh-CN’)。
不建議用以上刪除線表達(dá)的用法。不利于后期維護(hù)。
建議在數(shù)據(jù)庫中創(chuàng)建一個表將每種語言分別作為一列進(jìn)行維護(hù)。如果頁面元素重復(fù)性很低，并且需要信息量大請結(jié)合項(xiàng)目本身情況在項(xiàng)目初期設(shè)計每張表的多語言架構(gòu)。

TypeScript：

import { Injectable } from '@angular/core'; import { TranslateService, LangChangeEvent } from '@ngx-translate/core'; import { take } from 'rxjs/operators'; import { ReplaySubject } from 'rxjs';@Injectable({providedIn: 'root' }) export class AppTranslateService {translations: any = {};language$ = new ReplaySubject<LangChangeEvent>(1);constructor(private translateService: TranslateService) { }//設(shè)置初始語言setInitState(){//添加語言const availableLangs = ['en', 'zh-cn'];this.translateService.addLangs(availableLangs);//獲取當(dāng)前語言類型let lang = localStorage.getItem('translate');//如果url上沒有語言類型，則默認(rèn)中文if (lang === null || lang.length === 0) {// const browserLang = (this.translateService.getBrowserLang().includes('zh')) ? 'zh-cn' : 'en';const browserLang = 'zh-cn';lang = browserLang;localStorage.setItem('translate', lang);} //如果url上的語言類型不在列表中，則默認(rèn)英文else {if (availableLangs.indexOf(lang) < 0) {lang = 'en';localStorage.setItem('translate', lang);}}this.setLang(lang);}//當(dāng)語言改變時使用新語言setLang(lang: string) {//注冊Lang的監(jiān)聽事件（只要注冊過，一旦發(fā)生change事件，即會調(diào)用）this.translateService.onLangChange.pipe(take(1)).subscribe(result => {this.language$.next(result);this.translations = result.translations;console.log(this.translations);});//使用這個Langthis.translateService.use(lang);}//根據(jù)key獲取對應(yīng)的值,用于導(dǎo)航欄部分第一次獲取不到值，異步獲取值async translate(key: string): Promise<string> {return await this.translateService.get(key).toPromise();}//根據(jù)key獲取對應(yīng)的值translateText(key: string): string{const text: string = this.translateService.instant(key);return text;}

HTML：

<p>{{'Edit'' | translate}}</p>

TranslateService僅需在要使用該服務(wù)的地方注入，在不需要的組件中，可以不注入，直接使用管道在HTMl翻譯對應(yīng)的內(nèi)容。

在HTML中還可以使用屬性指令來翻譯：

<div [translate]="'Edit'"></div>

如果在ts文件中獲取對應(yīng)語言可以用

Edit = this.translate.translations['Edit '] === undefined? '編輯':this.translate.translations['Edit ']; 或者 Edit = ''; ngOnInit() { this.Edit = this.translate.translations.Edit ; }

翻譯TypeScript中的內(nèi)容
可以使用TranslateService中的instant()方法配合訂閱onLangChange來實(shí)現(xiàn)。onLangChange是一個監(jiān)聽語言變化的EventEmitter，可以實(shí)現(xiàn)跨模塊通訊，比如A模塊中切換成英文，onLangChange會通知所有模塊下語言都切換成英文，此時去B模塊下，界面也是英文狀態(tài)的。

后端采用C#寫法
Controller

[HttpGet("[action]")]public async Task<IActionResult> GetValues(string valueType){var translateValues = await translateManager.GetTranslateValues(valueType);return Ok(translateValues);}

Service

//獲取Json文件 public async Task<JObject> GetTranslateValues(string languageCode){string sqlBase = "SELECT [TextKey], [{0}] [TextValue] FROM [App].[TextValue] WHERE [IsDisabled] = 0 and [IsDeleted] = 0 ";string textValue = string.Empty;switch (languageCode){case "en":textValue = "TextValueEN";break;case "zh-cn":textValue = "TextValueCN";break;default:textValue = "TextValueEN";break;}string sql = string.Format(sqlBase, textValue);var result = await dbContext.Database.GetDbConnection().QueryAsync(sql);JObject json = new JObject();foreach (var row in result){json.Add(row.TextKey, row.TextValue);}return json;}

表結(jié)構(gòu)

對于以上內(nèi)容如有爭議，歡迎大家留言給我，也為方便國內(nèi)Angular使用者，謝謝大家。

引用

鏈接:
[1]: https://tc9011.com/2017/12/16/angular%E4%B8%ADngx-translate%E4%BD%BF%E7%94%A8%E7%AE%80%E4%BB%8B/
[2]:https://www.jb51.net/article/121841.htm

總結(jié)

以上是生活随笔為你收集整理的Angular国际化中ngx-translate使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。