Angular2+国际化方案(ngx-translate)的示例代码
本文只针对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;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 数据库E-R模型关系图
- 修改Visual Studio类模板添加版权注释信息
- Oracle 11g 安装教程
- ASP.NET MVC学习笔记07数据表和模型添加新字段
- 以太坊·电影院场景区块链应用探索
- 最全爬虫攻略:微博、APP、公众号一个不能少!
- 注册中心 Eureka 源码解析 —— Eureka-Client 初始化(一)之 EurekaInstanceConfig
- 无论人工智能发展到什么地步,都离不开这6段代码
- Dubbo源码解析 —— 逻辑层设计之服务降级
- 【死磕Java并发】-----J.U.C之Condition
- 数据库中间件 MyCAT 源码分析 —— 【单库单表】查询
- 数据库中间件 MyCAT源码分析:【单库单表】插入
- 数据库中间件 MyCAT 源码分析 —— 调试环境搭建
- 分布式事务 TCC-Transaction 源码解析 —— 事务存储器
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法