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;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# ngx  # translate  # Angular  # 国际化  # 方案  # Angular4项目中添加i18n国际化插件ngx-translate的步骤详解  # Angular2中如何使用ngx-translate进行国际化  # 浅析如何利用angular结合translate为项目实现国际化  # AngularJs 国际化（I18n/L10n）详解  # AngularJS国际化详解及示例代码  # Angular 项目实现国际化的方法  # 的是  # 如果你  # 可以通过  # 加载  # 可选  # 而非  # 是一个  # 你可以  # 第一个  # 我们可以  # 第二个  # 或者是  # 自定义  # 可以使用  # 不被  # 有两种  # 命名为  # 需要注意  # 更低  # 大家多多 

相关文章： 建站之星安装提示数据库无法连接如何解决？  在线制作视频的网站有哪些,电脑如何制作视频短片？  如何用wdcp快速搭建高效网站？  建站之星后台密码如何安全设置与找回？  音响网站制作视频教程,隆霸音响官方网站？  Android自定义控件实现温度旋转按钮效果  香港服务器如何优化才能显著提升网站加载速度？  陕西网站制作公司有哪些,陕西凌云电器有限公司官网？  如何破解联通资金短缺导致的基站建设难题？  制作网站软件推荐手机版,如何制作属于自己的手机网站app应用？  韩国服务器如何优化跨境访问实现高效连接？  建站之星在线版空间：自助建站+智能模板一键生成方案  独立制作一个网站多少钱,建立网站需要花多少钱？  专业公司网站制作公司,用什么语言做企业网站比较好？  网页制作模板网站推荐,网页设计海报之类的素材哪里好？  网站制作报价单模板图片,小松挖机官方网站报价？  在线制作视频网站免费,都有哪些好的动漫网站？  开心动漫网站制作软件下载,十分开心动画为何停播？  专业企业网站设计制作公司,如何理解商贸企业的统一配送和分销网络建设？  网页设计与网站制作内容,怎样注册网站？  高性价比服务器租赁——企业级配置与24小时运维服务  小自动建站系统：AI智能生成+拖拽模板，多端适配一键搭建  网站制作大概要多少钱一个,做一个平台网站大概多少钱？  制作网站外包平台,自动化接单网站有哪些？  极客网站有哪些,DoNews、36氪、爱范儿、虎嗅、雷锋网、极客公园这些互联网媒体网站有什么差异？  阿里云高弹*务器配置方案｜支持分布式架构与多节点部署  如何在宝塔面板创建新站点？  香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧  网站海报制作教学视频教程,有什么免费的高清可商用图片网站，用于海报设计？  建站之星免费版是否永久可用？  深圳网站制作费用多少钱,读秀，深圳文献港这样的网站很多只提供网上试读，但有些人只要提供试读的文章就能全篇下载，这个是怎么弄的？  ,sp开头的版面叫什么？  重庆市网站制作公司,重庆招聘网站哪个好？  如何选择高效稳定的ISP建站解决方案？  建站之星安装需要哪些步骤及注意事项？  在线ppt制作网站有哪些软件,如何把网页的内容做成ppt？  建站主机选购指南：核心配置优化与品牌推荐方案  成都品牌网站制作公司,成都营业执照年报网上怎么办理？  h5网站制作工具有哪些,h5页面制作工具有哪些？  微信小程序制作网站有哪些,微信小程序需要做网站吗？  建站主机SSH密钥生成步骤及常见问题解答？  建站之星后台管理如何实现高效配置？  如何批量查询域名的建站时间记录？  电商网站制作公司有哪些,1688网是什么意思？  如何通过云梦建站系统实现SEO快速优化？  济南网站建设制作公司,室内设计网站一般都有哪些功能？  南京做网站制作公司,南京哈发网络有限公司，公司怎么样，做网页美工DIV+CSS待遇怎么样？  如何高效利用亚马逊云主机搭建企业网站？  建站一年半SEO优化实战指南：核心词挖掘与长尾流量提升策略  ,有什么在线背英语单词效率比较高的网站？