介绍 npm install @ngx-translate/core ——保存 //, other 模块
import {TranslateModule},得到& # 39;@ngx-translate/核心# 39;;
@NgModule ({
声明:,才能
,,,AppComponent,
,,,
进口:,才能
,,,//other 模块
,,,TranslateModule.forRoot (),
,,,
供应商:,才能
,,,
,,引导:[AppComponent]
})
export class AppModule {
} npm install @ngx-translate/http-loader ——保存 //, other 模块
import {TranslateModule},得到& # 39;@ngx-translate/核心# 39;;//,自定义加载方法
export function HttpLoaderFactory (http: HttpClient), {
return 才能;new TranslateHttpLoader (http、& # 39;。/资产/i18n/& # 39;,, & # 39; . json ? & # 39;);
}
@NgModule ({
声明:,才能
,,,AppComponent,
,,,
进口:,才能
,,,//other 模块
,,,TranslateModule.forRoot ({
,,,,,装载机:,{
,,,,,,,提供:,TranslateLoader,
,,,,,,,useFactory:, HttpLoaderFactory,
,,,,,,,deps:, (HttpClient),
,,,,,}
,,,}),
,,,
供应商:,才能
,,,
,,引导:[AppComponent]
})
export class AppModule {
} //,/断言il8n/en.json
{
,“Hello":“你好,,{{value}}“,
,“Introduce": {
“Name"才能:,“my name is ,{{名称}}!”
“Today"才能:,“today is {{日期}},,以及你time is {{时间}},
,}
} import {, Component },得到& # 39;@angular/核心# 39;;
import {TranslateService},得到& # 39;@ngx-translate/核心# 39;;
@ component ({
,选择器:& # 39;app-root& # 39;
,templateUrl: & # 39;。/app.component.html& # 39;
,styleUrls: [& # 39;。/app.component.less& # 39;】
})
export class AppComponent {
,构造函数(
,,public 翻译:,TranslateService,
,){
,,this.translate.setDefaultLang (& # 39; en # 39;);
,,this.translate.use (& # 39; en # 39;);
,}
} //, app.compent.ts
this.translate.get (
& # 39;才能Introduce.Name& # 39;
{才能名称:,& # 39;贾维斯# 39;}
).subscribe ((res:字符串),=祝辞,{
console.log才能(& # 39;res # 39;,, res);,//, res my name is ,贾维斯。
});
this.translate.get (
& # 39;才能Introduce.Today& # 39;
{才能
,,,日期:,new 日期().getDate (),
,,,时间:,new 日期().getTime ()
,,},
).subscribe ((res:字符串),=祝辞,{
console.log才能(& # 39;res # 39;,, res);,//, res today is 22岁,以及你time is 1534937370461
}); & lt; div>{{& # 39;你好# 39;,|,翻译:,param
本篇文章为大家展示了怎么在角中实现多语言配置,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
角的国际化方案,采用ngx-translate来实现。
安装模块:
在根模块中导入:
我们希望可以在一个固定的文件里面配置对应的翻译文件,然后在每个用到的组件里面使用它,随意我们需要借助TranslateHttpLoader来加载翻译文件,首先安装TranslateHttpLoader:
翻译文件可以放在/资产/i18n/(lang)。json中,朗代表使用的语言文件名称,然后我们可以在跟组件中添加配置对应的加载项:
然后我们在翻译文件中配置一个简单的示例:
应用的时候我们可以使用点语法,例如:介绍。名字。
好了,定义好之后再来看如何使用。我们可以使用服务或管道或指令的方式来达到显示语言的效果。在使用之前,我们需要在应用中初始化TranslateService:
我倾向于在跟组件的构造里面初始化TranslateService,因为一个系统的翻译是统一的,在开始应用的时候就需要设置好默认语言。这里使用translate.setDefaultLang (& # 39; en # 39;)来设置默认语言为英文。然后使用translate.user (& # 39; en # 39;)手动选择使用英文。在切换语言的时候,我们使用translate.user([朗])来设置启用哪个语言。
最后来使用翻译,有多种使用的方式来。看看。
<强>使用方式 <强>
<强>使用服务的方式
在运行的时候,会先发起个请求通过Http获取翻译文件,通过可观测的方式应用参数上去,然后获得翻译的内容。
<强>使用管的方式
