angular多语言配置详解


Posted in Javascript onMay 16, 2019

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
window.name代替cookie的实现代码
Nov 28 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
vue实现路由监听和参数监听
Oct 29 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 #Javascript
Django模板继承 extend标签实例代码详解
May 16 #Javascript
vue视图不更新情况详解
May 16 #Javascript
详解如何写出一个利于扩展的vue路由配置
May 16 #Javascript
Vue中props的详解
May 16 #Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 #Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 #Javascript
You might like
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
jquery radio 操作代码
2011/03/16 Javascript
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
python strip()函数 介绍
2013/05/24 Python
python之wxPython菜单使用详解
2014/09/28 Python
Python找出list中最常出现元素的方法
2016/06/14 Python
python 全局变量的import机制介绍
2017/09/07 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
django 中QuerySet特性功能详解
2019/07/25 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
美国在线家装零售商:Build.com
2016/09/02 全球购物
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
班级入场式解说词
2014/02/01 职场文书
社区健康教育实施方案
2014/03/18 职场文书
继承公证书样本
2014/04/04 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
实习感想范文
2015/08/10 职场文书