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中的函数
Jan 22 Javascript
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
JQuery验证工具类搜集整理
Jan 16 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
Backbone中View之间传值的学习心得
Aug 09 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
使用gulp构建前端自动化的方法示例
Dec 25 Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
Vuex实现简单购物车
Jan 10 Vue.js
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
漂亮但不安全的CTB
2006/10/09 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
jQuery+koa2实现简单的Ajax请求的示例
2018/03/06 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
简单介绍Python中的几种数据类型
2016/01/02 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
Python全面分析系统的时域特性和频率域特性
2020/02/26 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
python如何快速生成时间戳
2020/07/21 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
就业自荐书
2013/12/05 职场文书
《莫高窟》教学反思
2014/02/25 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
Python日志模块logging用法
2022/06/05 Python