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 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
Dom操作之兼容技巧分享
Sep 20 Javascript
基于jquery中children()与find()的区别介绍
Apr 26 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 Javascript
实例讲解JavaScript中instanceof运算符的用法
Jun 08 Javascript
Vue.js每天必学之Class与样式绑定
Sep 05 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
node中间层实现文件上传功能
Jun 11 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 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
PHP APP微信提现接口代码
2018/09/30 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
2010/04/01 Javascript
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
jQuery动态加载css文件实现方法
2016/06/15 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
ES6的Fetch异步请求的实现方法
2018/12/07 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
Python网络爬虫实例讲解
2016/04/28 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
python的faker库用法
2019/11/28 Python
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
英语生日邀请函
2014/01/23 职场文书
三好学生事迹材料
2014/12/24 职场文书
婚礼父母答谢词
2015/01/04 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
小学安全工作总结2015
2015/05/18 职场文书
python for循环赋值问题
2021/06/03 Python