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使用技巧精萃[代码非常实用]
Nov 21 Javascript
JS 强制设为首页的代码
Jan 31 Javascript
Jquery 常用方法经典总结
Jan 28 Javascript
JQuery 将元素显示在屏幕的中央的代码
Feb 27 Javascript
最简单的js图片切换效果实现代码
Sep 24 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 Javascript
JavaScript实现一个空中避难的小游戏
Jun 06 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
微信小程序中使用echarts的实现方法
Apr 24 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
js 执行上下文和作用域的相关总结
Feb 08 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日历[测试通过]
2008/03/27 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
让CodeIgniter的ellipsize()支持中文截断的方法
2014/06/12 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
浅谈php调用python文件
2019/03/29 PHP
JavaScript 10件让人费解的事情
2010/02/15 Javascript
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
Django框架中处理URLconf中特定的URL的方法
2015/07/20 Python
python实现内存监控系统
2021/03/07 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
美国校服网上商店:French Toast
2019/10/08 全球购物
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
应届生船舶驾驶求职信
2013/10/19 职场文书
经济管理自荐书
2014/06/09 职场文书
工厂车间标语
2014/06/19 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
外国人来华邀请函
2015/01/31 职场文书
英文邀请函
2015/02/02 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS