关闭

angular多语言配置

时间: 2019-05-16阅读: 988标签: 语言

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的方式

<div>{{'Hello' | translate: param</div>

在js里定义参数param:

const param = {
    value: 'world',
};


使用指令

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

<span [translate]="'Introduce.Name'" [translateParams]="{name: 'Jarvis'}"></span>

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

<span translate [translateParams]="{date: '10.11', time: '20:33'}">Introduce.Today</span>


应用html标签

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

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

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

<p [innerHTML]="'Introduce.Name'| translate: param"></p>


常用方法

instant() 即时翻译

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

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

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

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

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

参考:https://www.npmjs.com/package/@ngx-translate/core
原文来源:https://segmentfault.com/a/1190000019198537


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/3342

关闭

javascript是哪个公司设计的?

javascript是Netscape(网景)公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近

javascript是弱类型语言吗?

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。

学习编程开发_如何学习并掌握一门计算机编程语言

如果你有兴趣编写计算机程序,移动APP,网站,游戏或者任何软件,你应该学习编程。编程语言撰写的代码构建了计算机的程序。无论对于何种计算机编程语言,其核心编程思想都是一样的

JavaScript 与 Java、PHP 的比较

网站开发的实践从设计方面开始,包括客户端编程语言。大体上说,在网页设计中使用了三种语言:HTML,CSS和JavaScript。自从网站发明以来,HTML和CSS已经成为网页设计的基础,但是JavaScript被用于添加网站的动态视图。

javascript保留字/关键字有哪些?

在一些语言中,一些保留字可能并没有应用于当前的语法中,这就成了保留字与关键字的区别。一般出现这种情况可能是由于考虑扩展性。例如,Javascript有一些未来保留字,如abstract、double、goto等等。

了解各种编程语言名称的来历

写了那么多代码,你知道你用的编程语言为什么叫那个名字么?1995年,当时在网景公司就职的布兰登·艾克正为Netscape Navigator 2.0浏览器开发的一门名为LiveScript的脚本语言

web网页多语言的实现方案_前端实现多语言切换

需要在web中实现多语言的切换,当用户语言切换完成后下次重新打开网页,也是上次设置的语言进行显示。在用户点击切换语言后,把选择的语言版本保存在cookie中;定义语言的标识+内容的json字符串

JavaScript 很糟糕吗?

虽然 JavaScript 是目前最流行的技术,但它确实也是一种设计糟糕的语言。这就是现实。只有承认现实,我们才能开始解决这个问题。根据Stack Overflow 2018 年的调查 ,JS 是当前最流行的一项技术。我们这里有一个 宝贵视频 。

javascript为什么会火?javascript的未来怎么样?

javascript和其它面向对象语言越来越像,自从javascript引入了class以后,语法和格式一些和其它面向对象的语言越来越像,比如java,C#等,使学习javascript的学习成本很低,用的人自然越来越多。其它的特性也会慢慢的引入javascritpt

学习你的第一门编程语言

好的,决定好想学什么编程语言了吗,现在就让我们开始学习吧。所有你需要做的就是打开一本书,然后开始阅读,是这样的吗?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!