angular多语言配置详解

2023-08-23 10:30:07 316

angular的国际化方案，采用ngx-translate来实现。

安装模块：

npminstall@ngx-translate/core--save

在根模块中导入：

//othermodule
import{TranslateModule}from'@ngx-translate/core';
@NgModule({
declarations:[
AppComponent,
],
imports:[
//othermodule
TranslateModule.forRoot(),

],
providers:[
],
bootstrap:[AppComponent]
})
exportclassAppModule{
}

我们希望可以在一个固定的文件里面配置对应的翻译文件，然后在每个用到的组件里面使用它，随意我们需要借助TranslateHttpLoader来加载翻译文件。首先安装TranslateHttpLoader:

npminstall@ngx-translate/http-loader--save

翻译文件可以放在/assets/i18n/[lang].json中，[lang]代表使用的语言文件名称。然后我们可以在跟组件中添加配置对应的加载项：

//othermodule
import{TranslateModule}from'@ngx-translate/core';
//自定义加载方法
exportfunctionHttpLoaderFactory(http:HttpClient){
returnnewTranslateHttpLoader(http,'./assets/i18n/','.json?');
}
@NgModule({
declarations:[
AppComponent,
],
imports:[
//othermodule
TranslateModule.forRoot({
loader:{
provide:TranslateLoader,
useFactory:HttpLoaderFactory,
deps:[HttpClient],
}
}),
],
providers:[
],
bootstrap:[AppComponent]
})
exportclassAppModule{
}

然后我们在翻译文件中配置一个简单的示例：

///asserts/il8n/en.json
{
"Hello":"hello,{{value}}",
"Introduce":{
"Name":"mynameis{{name}}.",
"Today":"todayis{{date}},andnowtimeis{{time}}"
}
}

应用的时候我们可以使用点语法，例如：Introduce.Name。

好了，定义好之后再来看如何使用。我们可以使用服务或管道或指令的方式来达到显示语言的效果。在使用之前，我们需要在应用中初始化TranslateService：

import{Component}from'@angular/core';
import{TranslateService}from'@ngx-translate/core';
@Component({
selector:'app-root',
templateUrl:'./app.component.html',
styleUrls:['./app.component.less']
})
exportclassAppComponent{
constructor(
publictranslate:TranslateService,
){
this.translate.setDefaultLang('en');
this.translate.use('en');
}
}

我倾向于在跟组件的construct里面初始化TranslateService，因为一个系统的翻译是统一的，在开始应用的时候就需要设置好默认语言。这里使用translate.setDefaultLang('en')来设置默认语言为英文。然后使用translate.user('en')手动选择使用英文。在切换语言的时候，我们使用translate.user([lang])来设置启用哪个语言。

最后来使用翻译，有多种使用的方式。来看看。

使用方式

使用Service的方式

在运行的时候，会先发起个请求通过Http获取翻译文件，通过Observable的方式应用参数上去，然后获得翻译的内容。

//app.compent.ts
this.translate.get(
'Introduce.Name',
{name:'Jarvis'}
).subscribe((res:string)=>{
console.log('res',res);//resmynameisJarvis.
});
this.translate.get(
'Introduce.Today',
{
date:newDate().getDate(),
time:newDate().getTime()
},
).subscribe((res:string)=>{
console.log('res',res);//restodayis22,andnowtimeis1534937370461
});

使用pipe的方式

{{'Hello'|translate:param

在js里定义参数param:

constparam={
value:'world',
};

使用指令

管道的方式虽然方便，但参数还是需要在先定义好，这样子变量多的话也比较繁琐。使用指令的方式可以在程序中直接传参：

或者直接将元素的内容作为key：

Introduce.Today

应用html标签

可以在翻译文件中中定义简单的行级html标签

{
"Hello":"hello,{{value}}",
}

要渲染它们，在任何元素上只需要将innerHTML属性和管道一同使用即可。

常用方法

instant()即时翻译

有些情况下，我们要在js里面动态的获取值和赋值，这时候没法使用模板语法，使用subscribe的方式又不利于代码的组织，这时候我们需要即时翻译来搞定了。方法定义：

instant(key:string|Array),insterpolateParams?:Object):string|Object

调用的时候传入key和对应的参数，即可返回当前key的翻译：

this.translate.instant('HELLO',{value:'Jarvis'});

但是需要注意的是，这个方法是同步的，默认加载器是异步的。使用这个方法需要确保翻译文件已经加载完成了，如果不确定，就应该用get的方式。

参考：

https://www.npmjs.com/package/@ngx-translate/core

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

angular多语言配置详解

热门推荐

随机推荐