Angular2+国际化方案（ngx-translate）的示例代码

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

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 { }

@NgModule({  imports: [    BrowserModule,    HttpModule,    TranslateModule.forRoot({      provide: TranslateLoader,      useFactory: (http: HttpClient) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),      deps: [HttpClient]    })  ],  bootstrap: [AppComponent]})export class AppModule { }

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');}

{  "HELLO": "hello {{value}}"}

translate.setTranslation('en', {  HELLO: 'hello {{value}}'});

{  "HOME": {    "HELLO": "hello {{value}}"  }}

translate.get('HELLO', {value: 'world'}).subscribe((res: string) => {  console.log(res);  //=> 'hello world'});

<div>{{ 'HELLO' | translate:param }}</div>

param = {value: 'world'};

<div [translate]="'HELLO'" [translateParams]="{value: 'world'}"></div>

<div translate [translateParams]="{value: 'world'}">HELLO</div>

{  "HELLO": "Welcome to my Angular application!<br><strong>This is an amazing app which uses the latest technologies!</strong>"}

<div [innerHTML]="'HELLO' | translate"></div>

/** * 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;

/** * 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;