大綱
1梳码、認(rèn)識ngx-translate
2焕襟、ngx-translate的配置步驟
3缀辩、ngx-translate的使用方式
4屠列、ngx-translate的使用注意方式
認(rèn)識ngx-translate
ngx-translate的官網(wǎng)解釋是：The internationalization (i18n) library for Angular庵楷，即ngx-translate是一個(gè)用于angular項(xiàng)目的國際化庫罢艾。簡單的說，ngx-translate是angular項(xiàng)目的國際化功能而提供的依賴庫尽纽。
ngx-translate官網(wǎng)有對該插件的配置和使用方法的說明咐蚯，如果有興趣精深的讀者可以去看看源碼，以下是我對ngx-translate使用的經(jīng)驗(yàn)弄贿。
ngx-translate
ngx-translate的配置步驟
1春锋、下載ngx-translate的依賴庫
//利用npm來安裝ngx-translate依賴
npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save
2、引入TranslateModule模塊
2.1差凹、在項(xiàng)目根模塊中導(dǎo)入支持的包
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
2.2 期奔、在項(xiàng)目根模塊中配置ngx-translate
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
TranslateModule.forRoot({
provide: TranslateLoader,
useFactory: (http: HttpClient) =>
new TranslateStaticLoader(http, '/assets/i18n', '.json'),
deps: [HttpClient]
})
綜上配置，如下代碼
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Http } from '@angular/http';
import {
TranslateModule,
TranslateLoader,
TranslateService
} 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 { }
3危尿、注入TranslateService 服務(wù)
3.1呐萌、在需要用到的component里面注入TranslateService
import {TranslateService} from '@ngx-translate/core';
3.2、通過服務(wù)設(shè)置當(dāng)前應(yīng)用的語言
constructor(
private translate: TranslateService
){
this.translate.use('en');
}
4谊娇、創(chuàng)建國際化文件
根據(jù)根模塊的配置肺孤，我們應(yīng)該在assets文件中再創(chuàng)建一個(gè)文件夾i18n，然后在i18n的文件夾下創(chuàng)建國際化文件济欢，可以是en.json(英文)赠堵、zh_cn.json(中文)、zh_tw.json(中國臺灣)法褥，this.translate.use('en')用的就是en.json翻譯文件顾腊，如果要使用其他兩個(gè)翻譯文件就是this.translate.use('zh_cn')、this.translate.use('zh_tw')
en.json
{
"welcome":"welcome to this app",
"getName":"hello I am {{name}}"
}
zh_cn.json
{
"welcome":"歡迎使用本應(yīng)用",
"getName":"你好挖胃，我是{{name}}"
}
5、使用國際化
5.1、使用管道來翻譯輸入信息
<span>{{ 'welcome '| translate}}</span>
5.2酱鸭、使用指令來翻譯指定信息
<span [translate]="'welcome'">welcome</span>
5.3吗垮、使用服務(wù)翻譯指定信息
this.translate.get('welcome').subscribe((res: string) => {
console.log(res);
this.welcomeTranslate = res;
});
5.4、對帶參數(shù)的信息進(jìn)行翻譯
5.4.1凹髓、翻譯管道中帶參數(shù)
<span>{{getName | translate: {name:"crk"} }}</span>
5.4.2烁登、翻譯指令帶參數(shù)
<span
[translate]="getName"
[translateParams]="{'name':'ggg'}">
getName
</span>
5.4.3、翻譯服務(wù)帶參數(shù)
this.translate.get('getName',this.param).subscribe((res: string) => {
console.log(res);
this.getNameTranslate = res;
});
需要注意
也許你根據(jù)我的教程走到這步蔚舀，運(yùn)行項(xiàng)目的時(shí)候會(huì)發(fā)現(xiàn)并沒有如愿以償?shù)倪_(dá)到效果饵沧，那么是我的教程有問題嗎？并不是的赌躺，因?yàn)橐陨系牟襟E都是作者一步一步的操作過的狼牺，也許你根據(jù)網(wǎng)上的絕大部分的教程安裝配置都得不到理想的效果，如果達(dá)到了效果礼患，那么只能說你的運(yùn)氣不錯(cuò)是钥。
為什么這么說呢？并不是作者為自己的博客無法滿足讀者的需求而找到的借口缅叠。之所以會(huì)出現(xiàn)這樣的原因是因?yàn)榘惭b的時(shí)候項(xiàng)目的環(huán)境可能有些問題悄泥。
下面是一種ngx-translate官網(wǎng)給出的相應(yīng)的依賴庫對應(yīng)的angular版本。
作者我本人的angular的版本是angular5肤粱，因此完整準(zhǔn)確的下載依賴庫的代碼應(yīng)該是如下所示：
//完整的npm下載依賴庫代碼
npm install @ngx-translate/core@8.x --save
npm install @ngx-translate/http-loader@1.x --save
就我根據(jù)源碼看到的7.x的方式是依賴于@angular/http庫中的http對象弹囚，但是8.x以及之后的卻是依賴于HttpClinet的依賴庫實(shí)現(xiàn)的，因此有時(shí)候版本對不上總是會(huì)出現(xiàn)一些奇奇怪怪的錯(cuò)誤领曼，那么這時(shí)候就要檢查一下是因?yàn)榇a的原因或者有可能是因?yàn)榘姹静粚Φ膯栴}鸥鹉。
綜上
以上就是我對angular項(xiàng)目國際化配置（ngx-translate）的使用和理解，也許讀者自己做配置的時(shí)候沒有解決思路的時(shí)候會(huì)很著急悯森，會(huì)很無奈宋舷。當(dāng)這是自己探索angular框架時(shí)有遇到的，就像我遇到版本的問題的時(shí)候也是查找了很久瓢姻，最后查到了官網(wǎng)看了源碼才發(fā)現(xiàn)了問題祝蝠，最后解決問題的時(shí)候自己還是有點(diǎn)小滿足的。每一次問題的解決都是對我們自我的提升幻碱，哪怕也許最后沒有解決绎狭，我們也都曾努力過不是嗎。
這里提供一下我實(shí)踐的代碼：angular實(shí)例中的angular-translate
