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 性能优化指南(3)
May 21 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
brook javascript框架介绍
Oct 10 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
七个很有意思的PHP函数
May 12 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
node.js开机自启动脚本文件
Dec 24 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
js实现坦克大战游戏
Feb 24 Javascript
VSCode搭建Vue项目的方法
Apr 30 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在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
javascript 写类方式之一
2009/07/05 Javascript
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
Python translator使用实例
2008/09/06 Python
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
python实现扫雷小游戏
2020/04/24 Python
python pymysql库的常用操作
2020/10/16 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
税务干部鉴定材料
2014/02/11 职场文书
会计实训报告范文
2014/11/04 职场文书
升职自我推荐信范文
2015/03/25 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
小学安全教育主题班会
2015/08/12 职场文书
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技