怎么在angular中实现多语言配置-创新互联

本篇文章为大家展示了怎么在angular中实现多语言配置,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

成都创新互联是一家专业的成都网站建设公司,我们专注成都网站设计、成都网站建设、外贸网站建设、网络营销、企业网站建设,卖友情链接广告投放平台为企业客户提供一站式建站解决方案,能带给客户新的互联网理念。从网站结构的规划UI设计到用户体验提高,创新互联力求做到尽善尽美。

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

安装模块:

npm install @ngx-translate/core --save

在根模块中导入:

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

  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

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

npm install @ngx-translate/http-loader --save

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

// 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 {
}

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

// /asserts/il8n/en.json
{
 "Hello": "hello, {{value}}",
 "Introduce": {
  "Name": "my name is {{name}}.",
  "Today": "today is {{date}}, and now time is {{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']
})
export class AppComponent {
 constructor(
   public translate: 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); // 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里定义参数param:

const param = {
  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'});

上述内容就是怎么在angular中实现多语言配置,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。


分享文章:怎么在angular中实现多语言配置-创新互联
本文链接:http://scyanting.com/article/iopic.html