Angular2+国际化方案(ngx-translate)的示例代码


Posted in Javascript onAugust 23, 2017

本文只针对ngx-translate/core 6.x版本,如果你使用的是5.x或者更低的版本,请参照以下链接。

https://github.com/ngx-translate/core/blob/fb02ca5920aae405048ebab50e09db67d5bf12a2/README.md

安装

首先需要安装npm依赖:

npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save // 针对Angular>=4.3
npm install @ngx-translate/http-loader@0.1.0 --save // 针对Angular<4.3

这里需要注意,如果你使用的Angular版本是 Angular <4.3,那么需要安装http-loader@0.1.0版本。

因为0.1.0以后的版本TranslateHttpLoader构造函数的第一个参数改为HttpClient类型,而非Http类型。

用法

1、引入TranslateModule模块

首先需要在你项目的root NgModule中引入TranslateModule.forRoot()模块。一般在项目中默认命名为app.module.ts。

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {AppComponent} from './app';
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
 
@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这里使用了TranslateHttpLoader 来加载我们定义好的语言文件。"/assets/i18n/[lang].json"这里的lang就是当前正在使用的语言。

注意:如果当前采用的是AOT编译方式或者是ionic2工程,那么useFactory对应的必须是一个export的自定义方法而非内联方法。

 即以下这种方式是不被允许的:

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (http: HttpClient) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),
      deps: [HttpClient]
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2、注入TranslateService 服务

在需要用到的component里面注入TranslateService。

import {TranslateService} from '@ngx-translate/core';

然后在构造函数中定义当前应用的默认语言。

constructor(private translate: TranslateService) {
 // this language will be used as a fallback when a translation isn't found in the current language
 translate.setDefaultLang('en');

 // use the brower's default lang, if the lang isn't available, it will use the 'en'
 let broswerLang = translate.getBrowserLang();
 translate.use(broswerLang.match(/en|cn/) ? broswerLang : 'en');
}

3、翻译文本书写规则

有两种方式可以加载我们翻译好的语言文本。

首先你可以把翻译好的语言文本放到一个json文件中,然后通过TranslateHttpLoader来引用这个json文件。

例如:en.json

{
  "HELLO": "hello {{value}}"
}

另外也可以通过setTranslation方法手动加载。

translate.setTranslation('en', {
  HELLO: 'hello {{value}}'
});

同时,这里的json结构是支持嵌套的。

{
  "HOME": {
    "HELLO": "hello {{value}}"
  }
}

以上结构,可以通过"HOME.HELLO"来引用HELLO的内容。 

4、使用方法

我们可以通过TranslateService, TranslatePipe 或者 TranslateDirective这三种方式来获取我们翻译的文本内容。

TranslateService:

translate.get('HELLO', {value: 'world'}).subscribe((res: string) => {
  console.log(res);
  //=> 'hello world'
});

其中第二个参数{value: 'world'}是可选的。 

TranslateService:

<div>{{ 'HELLO' | translate:param }}</div>

param可以像如下方式在component里面定义。同样,这个参数也是可选的。

param = {value: 'world'};

 TranslateDirective:

<div [translate]="'HELLO'" [translateParams]="{value: 'world'}"></div>

或者

<div translate [translateParams]="{value: 'world'}">HELLO</div>

5、使用HTML标签

允许在你的翻译文本中直接嵌入HTML标签。

{
  "HELLO": "Welcome to my Angular application!<br><strong>This is an amazing app which uses the latest technologies!</strong>"
}

这时可以使用innerHTML 来进行渲染。

<div [innerHTML]="'HELLO' | translate"></div>

TranslateService API

公有属性(public properties):

/**
 * The default lang to fallback when translations are missing on the current lang
 */
defaultLang: string;
/**
 * The lang currently used
 * @type {string}
 */
currentLang: string;
/**
 * an array of langs
 * @type {Array}
 */
langs: string[];
/**
 * a list of translations per lang
 * @type {{}}
 */
translations: any;

公有方法(public methods):

/**
 * Sets the default language to use as a fallback
 * @param lang
 */
setDefaultLang(lang: string): void;
/**
 * Gets the default language used
 * @returns string
 */
getDefaultLang(): string;
/**
 * Changes the lang currently used
 * @param lang
 * @returns {Observable<*>}
 */
use(lang: string): Observable<any>;
/**
 * Gets an object of translations for a given language with the current loader
 * and passes it through the compiler
 * @param lang
 * @returns {Observable<*>}
 */
getTranslation(lang: string): Observable<any>;
/**
 * Manually sets an object of translations for a given language
 * after passing it through the compiler
 * @param lang
 * @param translations
 * @param shouldMerge
 */
setTranslation(lang: string, translations: Object, shouldMerge?: boolean): void;
/**
 * Returns an array of currently available langs
 * @returns {any}
 */
getLangs(): Array<string>;
/**
 * @param langs
 * Add available langs
 */
addLangs(langs: Array<string>): void;
/**
 * Returns the parsed result of the translations
 * @param translations
 * @param key
 * @param interpolateParams
 * @returns {any}
 */
getParsedResult(translations: any, key: any, interpolateParams?: Object): any;
/**
 * Gets the translated value of a key (or an array of keys)
 * @param key
 * @param interpolateParams
 * @returns {any} the translated key, or an object of translated keys
 */
get(key: string | Array<string>, interpolateParams?: Object): Observable<string | any>;
/**
 * Returns a stream of translated values of a key (or an array of keys) which updates
 * whenever the language changes.
 * @param key
 * @param interpolateParams
 * @returns {any} A stream of the translated key, or an object of translated keys
 */
stream(key: string | Array<string>, interpolateParams?: Object): Observable<string | any>;
/**
 * Returns a translation instantly from the internal state of loaded translation.
 * All rules regarding the current language, the preferred language of even fallback languages will be used except any promise handling.
 * @param key
 * @param interpolateParams
 * @returns {string}
 */
instant(key: string | Array<string>, interpolateParams?: Object): string | any;
/**
 * Sets the translated value of a key, after compiling it
 * @param key
 * @param value
 * @param lang
 */
set(key: string, value: string, lang?: string): void;
/**
 * Allows to reload the lang file from the file
 * @param lang
 * @returns {Observable<any>}
 */
reloadLang(lang: string): Observable<any>;
/**
 * Deletes inner translation
 * @param lang
 */
resetLang(lang: string): void;
/**
 * Returns the language code name from the browser, e.g. "de"
 *
 * @returns string
 */
getBrowserLang(): string;
/**
 * Returns the culture language code name from the browser, e.g. "de-DE"
 *
 * @returns string
 */
getBrowserCultureLang(): string;

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

Javascript 相关文章推荐
javascript针对DOM的应用分析(四)
Apr 15 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 Javascript
JQuery实现鼠标滚轮滑动到页面节点
Jul 28 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
Three.js中矩阵和向量的使用教程
Mar 19 Javascript
vue实现树状表格效果
Dec 29 Vue.js
36个正则表达式(开发效率提高80%)
Nov 17 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 #Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 #jQuery
浅谈vue-lazyload实现的详细过程
Aug 22 #Javascript
关于定制FileField中的上传文件名称问题
Aug 22 #Javascript
React复制到剪贴板的示例代码
Aug 22 #Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 #Javascript
vue.js异步上传文件前后端实现代码
Aug 22 #Javascript
You might like
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
初识PHP
2014/09/28 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
Prototype Object对象 学习
2009/07/12 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
js字符串完全替换函数分享
2014/12/03 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
2017/04/13 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
python随机模块random使用方法详解
2020/02/14 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
秋季校运动会广播稿
2014/02/23 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
篝火晚会策划方案
2014/05/16 职场文书
代理人委托书
2014/09/16 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
小学生作文评语集锦
2014/12/25 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
劳动模范获奖感言
2015/07/31 职场文书
python数字类型和占位符详情
2022/03/13 Python
Python字符串格式化方式
2022/04/07 Python