angular做语言切换_angular多语言配置详解
angular的國(guó)際化方案，采用ngx-translate來(lái)實(shí)現(xiàn)。
安裝模塊：
npm install @ngx-translate/core --save
在根模塊中導(dǎo)入：
// other module
import {TranslateModule} from '@ngx-translate/core';
@NgModule({
declarations: [
AppComponent,
],
imports: [
// other module
TranslateModule.forRoot(),
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule {
}
我們希望可以在一個(gè)固定的文件里面配置對(duì)應(yīng)的翻譯文件，然后在每個(gè)用到的組件里面使用它，隨意我們需要借助TranslateHttpLoader來(lái)加載翻譯文件。首先安裝TranslateHttpLoader:
npm install @ngx-translate/http-loader --save
翻譯文件可以放在/assets/i18n/[lang].json中，[lang]代表使用的語(yǔ)言文件名稱。然后我們可以在跟組件中添加配置對(duì)應(yīng)的加載項(xiàng)：
// other module
import {TranslateModule} from '@ngx-translate/core';
// 自定義加載方法
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json?');
}
@NgModule({
declarations: [
AppComponent,
],
imports: [
// other module
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient],
}
}),
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule {
}
然后我們?cè)诜g文件中配置一個(gè)簡(jiǎn)單的示例：
// /asserts/il8n/en.json
{
"Hello": "hello, {{value}}",
"Introduce": {
"Name": "my name is {{name}}.",
"Today": "today is {{date}}, and now time is {{time}}"
}
}
應(yīng)用的時(shí)候我們可以使用點(diǎn)語(yǔ)法，例如：Introduce.Name。
好了，定義好之后再來(lái)看如何使用。我們可以使用服務(wù)或管道或指令的方式來(lái)達(dá)到顯示語(yǔ)言的效果。在使用之前，我們需要在應(yīng)用中初始化TranslateService：
import { Component } from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
export class AppComponent {
constructor(
public translate: TranslateService,
) {
this.translate.setDefaultLang('en');
this.translate.use('en');
}
}
我傾向于在跟組件的construct里面初始化TranslateService，因?yàn)橐粋€(gè)系統(tǒng)的翻譯是統(tǒng)一的，在開始應(yīng)用的時(shí)候就需要設(shè)置好默認(rèn)語(yǔ)言。這里使用translate.setDefaultLang('en')來(lái)設(shè)置默認(rèn)語(yǔ)言為英文。然后使用translate.user('en')手動(dòng)選擇使用英文。在切換語(yǔ)言的時(shí)候，我們使用translate.user([lang])來(lái)設(shè)置啟用哪個(gè)語(yǔ)言。
最后來(lái)使用翻譯，有多種使用的方式。來(lái)看看。
使用方式
使用Service的方式
在運(yùn)行的時(shí)候，會(huì)先發(fā)起個(gè)請(qǐng)求通過(guò)Http獲取翻譯文件，通過(guò)Observable的方式應(yīng)用參數(shù)上去，然后獲得翻譯的內(nèi)容。
// app.compent.ts
this.translate.get(
'Introduce.Name',
{name: 'Jarvis'}
).subscribe((res: string) => {
console.log('res', res); // res my name is Jarvis.
});
this.translate.get(
'Introduce.Today',
{
date: new Date().getDate(),
time: new Date().getTime()
},
).subscribe((res: string) => {
console.log('res', res); // res today is 22, and now time is 1534937370461
});
使用pipe的方式
{{'Hello' | translate: param在js里定義參數(shù)param:
const param = {
value: 'world',
};
使用指令
管道的方式雖然方便，但參數(shù)還是需要在先定義好，這樣子變量多的話也比較繁瑣。使用指令的方式可以在程序中直接傳參：
或者直接將元素的內(nèi)容作為key：
Introduce.Today
應(yīng)用html標(biāo)簽
可以在翻譯文件中中定義簡(jiǎn)單的行級(jí)html標(biāo)簽
{
"Hello": "hello, {{value}}",
}
要渲染它們，在任何元素上只需要將innerHTML屬性和管道一同使用即可。
常用方法
instant() 即時(shí)翻譯
有些情況下，我們要在js里面動(dòng)態(tài)的獲取值和賦值，這時(shí)候沒(méi)法使用模板語(yǔ)法，使用subscribe的方式又不利于代碼的組織，這時(shí)候我們需要即時(shí)翻譯來(lái)搞定了。方法定義：
instant(key: string|Array), insterpolateParams?: Object):string|Object
調(diào)用的時(shí)候傳入key和對(duì)應(yīng)的參數(shù)，即可返回當(dāng)前key的翻譯：
this.translate.instant('HELLO', {value: 'Jarvis'});
但是需要注意的是，這個(gè)方法是同步的，默認(rèn)加載器是異步的。使用這個(gè)方法需要確保翻譯文件已經(jīng)加載完成了，如果不確定，就應(yīng)該用get的方式。
參考：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持我們。
時(shí)間： 2019-05-15
總結(jié)
以上是生活随笔為你收集整理的angular做语言切换_angular多语言配置详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 唯美初唐、红颜江湖 “花与剑”相约520
- 下一篇： 茶香弥漫《文豪迷犬怪奇谭》“品茶”主题角