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 相关文章推荐
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
jQuery判断checkbox是否选中的小例子
Dec 02 Javascript
深入理解JavaScript单体内置对象
Jun 06 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
jQuery选择器总结之常用元素查找方法
Aug 04 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
Dec 21 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 Javascript
前端常见跨域解决方案(全)
Sep 19 Javascript
Node.js API详解之 assert模块用法实例分析
May 26 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
Oct 22 Javascript
typescript编写微信小程序创建项目的方法
Jan 29 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
JAVA/JSP学习系列之四
2006/10/09 PHP
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
php url路由入门实例
2014/04/23 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
2013/06/09 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
2015/05/19 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
基于jquery实现多选下拉列表
2017/08/02 jQuery
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
JavaScript this使用方法图解
2020/02/04 Javascript
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
Python3基础之输入和输出实例分析
2014/08/18 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
python批量爬取下载抖音视频
2019/06/17 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
python双端队列原理、实现与使用方法分析
2019/11/27 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
日本最新流行服饰网购:Nissen
2016/07/24 全球购物
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
如何利用cmp命令比较文件
2013/09/23 面试题
成人大专生实习期的自我评价
2013/10/02 职场文书
高中同学聚会邀请函
2014/01/11 职场文书
个人公开承诺书
2014/03/28 职场文书
科长竞聘演讲稿
2014/05/16 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书