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 相关文章推荐
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
Vue.JS入门教程之事件监听
Dec 01 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
iframe高度自适应及隐藏滚动条的实例详解
Sep 29 Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 Javascript
vue router 配置路由的方法
Jul 26 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
JS如何判断对象是否包含某个属性
Aug 29 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+java实现自动新闻滚动窗口
2006/10/09 PHP
网站用php实现paypal整合方法
2010/11/28 PHP
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
MySQL 日期时间函数常用总结
2012/06/12 PHP
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
CI框架中zip类应用示例
2014/06/17 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
jquery replace方法去空格
2017/05/08 jQuery
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
JS中实现浅拷贝和深拷贝的代码详解
2019/06/05 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
python封装对象实现时间效果
2020/04/23 Python
Python发送Email方法实例
2014/08/21 Python
python3.6数独问题的解决
2019/01/21 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
python实现批处理文件
2020/07/28 Python
python中yield的用法详解
2021/01/13 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
html5时钟实现代码
2010/10/22 HTML / CSS
物业管理大学生个人的自我评价
2013/10/10 职场文书
个人租房协议书范本
2014/09/30 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
redis缓存存储Session原理机制
2021/11/20 Redis
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python