本文將介紹ngx-translate在angular8.x中的使用,主要內容有ngx-translate的安裝、前端json翻譯模板的配置以及如何改造為請求后台獲取翻譯模板json。完成后整體應用文件目錄結構如下:
|- src
|- |- app
|- |- |- app.component.css
|- |- |- app.component.html
|- |- |- app.component.ts
|- |- |- app.module.ts
|- |- assetss
|- |- |- i18n
|- |- |- |- en.json
|- |- |- |- zh.json
|- |- index.html
|- |- mian.ts
|- |- polyfills.ts
|- |- style.css
|- angular.json
|- package.json
一、安裝
在安裝之前需要確認自己使用的angular的版本,不同的版本的angular可能對應不同的ngx-translate的版本。本文使用的angular版本為8.0.0。安裝版本說明如下:
Angular | @ngx-translate/core | @ngx-translate/http-loader |
---|---|---|
7/8 | 11.x+ | 4.x+ |
6 | 10.x | 3.x |
5 | 8.x to 9.x | 1.x to 2.x |
4.3 | 7.x or less | 1.x to 2.x |
2 to 4.2.x | 7.x or less | 0.x |
此表格來源於ngx-translate官網,時間2019-12-1 11:16:28。
確認版本之后可以輸入如下命令安裝:
npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save
如需要指定特定的版本可以參考如下命令:
npm install @ngx-translate/core@11.x --save
二、使用前端json翻譯模板
1. 導入TranslateModule
要想在angular中使用ngx-translate
,則必須將其在應用程序的根@NgModule
中使用TranslateModule.forRoot()
導入,forRoot
靜態方法是同時提供和配置服務的約定。確保只在應用程序的根模塊中調用此方法,大多數情況下調用AppModule
。如果需要在其他的module
中使用,則需要在其他的module
中使用imports: [..., TranslateModule]
,和exports:[..., TranslateModule]
。
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {TranslateModule} from '@ngx-translate/core';
@NgModule({
imports: [
BrowserModule,
TranslateModule.forRoot()
],
bootstrap: [AppComponent]
})
export class AppModule { }
2. 使用AoT
如果想要在使用AoT
編譯的同時配置自定義的translateLoader
,那么這邊的函數必須使用export
修飾,即必須使用導出函數而不是內聯函數。現在AppModule
中代碼需要改造為如下:
// 包的導入省略......
// AoT
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
// import中必須導入HttpClientModule,否則會報錯'NullInjectorError: No provider for HttpClient!'
imports:[ BrowserModule, FormsModule, HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
})],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
這邊的loader中的provide代表將TranslateLoader
注入進來,而他的實現是由useFactory
的createTranslateLoader
來具體實現。
3. 配置json翻譯模板
在2中可以看到new TranslateHttpLoader(http, './assets/i18n/', '.json')
時已經指定了翻譯模板的存放路徑,所以現在需要在assets
默認靜態文件的存放目錄下新建名為i18n
的文件夾,並在其下新建zh.json
和en.json
翻譯模板文件,如下:
// en.json
// 注意:json文件中不要寫注釋!!!否則會報錯
{
"i18ntest":"Test Project For i18n",
"hello": "Hello World !",
"author":"author: {{value}}",
"language":"language",
"header": {
"author": "Default.W"
}
}
// zh.jsons
{
"hello": "你好, 世界!",
"i18ntest":"測試項目(i18n)",
"author":"作者: {{value}}",
"language":"語言",
"header": {
"author": "Default.W"
}
}
4. 使用
在AppComponent中使用,需要先將TranslateService
導入進來,並且在構造函數處注入:
constructor(public translateService: TranslateService) {
this.translateService.setDefaultLang('zh'); // 設置當前的默認語言類型
this.translateService.use('zh'); // 設置使用的語言類型
}
現在就可以在html中使用管道進行翻譯了:
<h1>{{'i18ntest' | translate}}</h1>
<p>{{'hello' | translate}}</p>
翻譯還支持傳值的翻譯方式,html文件中的param
為AppComponent中定義的變量:
// AppComponent
public param;
ngOnInit() {
this.param = {value: 'Default.W'};
}
<!-- app.component.html -->
<p>{{"author" | translate:param}}</p>
三、從后台請求需要的翻譯模板
如果不想在前台配置翻譯模板的json文件,我們還可以在后端自行添加properties文件,並且不要自己寫好一個后台接口來請求這個配置文件並組裝成為json文件返回。在前端我們只需要將translate.loader.ts
的中的TranslateLoader
實現,並在實現中請求后端寫好的接口就可以切換為后台的json。
// 需要重新實現這個方法來請求后端接口
export abstract class TranslateLoader {
abstract getTranslation(lang: string): Observable<any>;
}
實現代碼示例:
export class TranslateHttpLoader implements TranslateLoader {
/**
* Get the translate from the service
*/
public getTranslation(lang: string): Observable<Object> {
Subject subject = new Subject<any>();
this.http.post(url).subscribe({
next: res => {
subject.next(res);
},
error: err => {
console.log('獲取失敗');
}
});
return subject;
}
}
四、最終結果
1. 英文:
2. 中文
3. 完整代碼
完整代碼請查看github。