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 --savenpm install @ngx-translate/http-loader --save // 针对Angular>=4.3npm 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');}