Angular國際化中ngx-translate使用

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

背景

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

插件使用

導入ngx-translate
運行下面命令安裝@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，預編譯)準備

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

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

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

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

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

@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下面導入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 { }

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

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

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) { }//設置初始語言setInitState(){//添加語言const availableLangs = ['en', 'zh-cn'];this.translateService.addLangs(availableLangs);//獲取當前語言類型let lang = localStorage.getItem('translate');//如果url上沒有語言類型，則默認中文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上的語言類型不在列表中，則默認英文else {if (availableLangs.indexOf(lang) < 0) {lang = 'en';localStorage.setItem('translate', lang);}}this.setLang(lang);}//當語言改變時使用新語言setLang(lang: string) {//注冊Lang的監聽事件（只要注冊過，一旦發生change事件，即會調用）this.translateService.onLangChange.pipe(take(1)).subscribe(result => {this.language$.next(result);this.translations = result.translations;console.log(this.translations);});//使用這個Langthis.translateService.use(lang);}//根據key獲取對應的值,用于導航欄部分第一次獲取不到值，異步獲取值async translate(key: string): Promise<string> {return await this.translateService.get(key).toPromise();}//根據key獲取對應的值translateText(key: string): string{const text: string = this.translateService.instant(key);return text;}

HTML：

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

TranslateService僅需在要使用該服務的地方注入，在不需要的組件中，可以不注入，直接使用管道在HTMl翻譯對應的內容。

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

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

如果在ts文件中獲取對應語言可以用

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

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

后端采用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;}

表結構

對于以上內容如有爭議，歡迎大家留言給我，也為方便國內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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。