Angular2中如何使用ngx-translate进行国际化


Posted in Javascript onMay 21, 2017

相较于AngularJS中的ng-translate, angular2也有适合自己的国际化模块,就是ngx-translate。

项目地址:https://github.com/ngx-translate/core

使用angular-cli初始化项目:

ng new my-project

使用npm安装ngx-translate模块

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

在项目的根模块app.module.ts中引入该模块

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function HttpLoaderFactory(http:Http){
 return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
 declarations: [
  AppComponent
 ],
 imports: [
  ...
  TranslateModule.forRoot({
   loader:{
    provide:TranslateLoader,
    useFactory:HttpLoaderFactory,
    deps:[Http]
   }
  }

  )
 ],
 providers: [],
 bootstrap: [AppComponent]
})

在assets文件夹下新建i18n文件夹,并且新建两个语言的json文件。(比如zh-CN.json和en.json)

json文件是key-value形式的,key值代表要翻译的字符串,value值为特定语言的翻译结果,不用语言的文件一般key值是相同的,只是value值不同。

//zh-CN.json
{
  "welcome":"欢迎使用本应用",
  "hello":"你好",
  "get-lang":"获取语言类型"
}

//en.json
{
  "welcome":"welcome to this app",
  "hello":"Hola"
}

然后在相应的组件中使用Translate服务

import { TranslateService } from '@ngx-translate/core'
@Component({
 ...
})
export class AppComponent {
 constructor(private translate: TranslateService) {
  //添加语言支持
  translate.addLangs(['zh-CN', 'en']);
  //设置默认语言,一般在无法匹配的时候使用
  translate.setDefaultLang('zh-CN');

  //获取当前浏览器环境的语言比如en、 zh
  let broswerLang = translate.getBrowserLang();
  translate.use(broswerLang.match(/en|zh-CN/) ? broswerLang : 'zh-CN');
 }

 changeLang(lang) {
  console.log(lang);
  this.translate.use(lang);
 }
 toggleLang() {
  console.log(this.translate.getBrowserLang());
  //获取语言风格,相当于更详细的语言类型,比如zh-CN、zh-TW、en-US
  console.log(this.translate.getBrowserCultureLang());
 }
}

示例模板:

<div>
 <h2>{{ title | translate }}</h2>
 <label>
  {{ 'hello' | translate }}
  <select #langSelect (change)="changeLang(langSelect.value)">
   <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
  </select>
 </label>
</div>
<button (click)="toggleLang()">{{'get-lang' | translate}}</button>

使用方式和angularjs中的ng-translate类似,使用translate管道。

效果:

Angular2中如何使用ngx-translate进行国际化

源码地址:https://github.com/justforuse/angular2-demo/tree/master/angular-translate

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

Javascript 相关文章推荐
IE和firefox浏览器的event事件兼容性汇总
Dec 06 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
Oct 17 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
Oct 20 Javascript
解决vue-cli创建项目的loader问题
Mar 13 Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
jsonp跨域获取百度联想词的方法分析
May 13 Javascript
JavaScript中的连续赋值问题实例分析
Jul 12 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 Javascript
uni-app如何实现增量更新功能
Jan 03 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 Javascript
详解angularjs利用ui-route异步加载组件
May 21 #Javascript
如何在AngularJs中调用第三方插件库
May 21 #Javascript
详解Angular-Cli中引用第三方库
May 21 #Javascript
Angular2安装angular-cli
May 21 #Javascript
Angular2使用Augury来调试Angular2程序
May 21 #Javascript
Angular2使用Angular-CLI快速搭建工程(二)
May 21 #Javascript
Angular2使用Angular CLI快速搭建工程(一)
May 21 #Javascript
You might like
PHP cdata 处理(详细介绍)
2013/07/05 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
Linux下安装PHP MSSQL扩展教程
2014/10/24 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
Python爬虫DNS解析缓存方法实例分析
2017/06/02 Python
儿童python练习实例
2018/05/27 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
为什么要有struct关键字
2012/05/08 面试题
法学毕业生自荐信
2013/11/13 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
村级四风对照检查材料
2014/08/24 职场文书
课外小组活动总结
2014/08/27 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
Nginx限流和黑名单配置
2022/05/20 Servers