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 相关文章推荐
一个js封装的不错的选项卡效果代码
Feb 15 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
用JS将搜索的关键字高亮显示实现代码
Nov 08 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
javascript图片延迟加载实现方法及思路
Dec 31 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
JS重学系列之聊聊new操作符
Mar 04 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
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
一些常用的JS功能函数(2009-06-04更新)
2009/06/04 Javascript
jquery实现心算练习代码
2010/12/06 Javascript
用Juery网页选项卡实现代码
2011/06/13 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
javascript中html字符串转化为jquery dom对象的方法
2015/08/27 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
JS功能代码集锦
2016/05/04 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
2016/11/09 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
Vue移动端实现图片上传及超过1M压缩上传
2019/12/23 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
python中引用与复制用法实例分析
2015/06/04 Python
使用Python对SQLite数据库操作
2017/04/06 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
python中xlutils库用法浅析
2020/12/29 Python
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
init进程的作用
2015/08/20 面试题
程序员跳槽必看面试题总结
2013/06/28 面试题
厨师岗位职责
2013/11/12 职场文书
测绘工程个人的自我评价
2013/11/23 职场文书
应届大学生求职信
2013/12/01 职场文书
四年大学自我鉴定
2014/02/17 职场文书
社区义诊活动总结
2014/04/30 职场文书
离职证明标准格式
2014/09/15 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
Python&Matlab实现樱花的绘制
2022/04/07 Python