Angular4项目中添加i18n国际化插件ngx-translate的步骤详解

npm install @ngx-translate/core --savenpm install @ngx-translate/http-loader --save

import { TranslateLoader, TranslateModule} from '@ngx-translate/core';import { TranslateHttpLoader } from '@ngx-translate/http-loader'; imports: [ TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: (createTranslateHttpLoader), deps: [Http] } }) ]

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { HttpModule, Http } from '@angular/http';import { TranslateLoader, TranslateModule} from '@ngx-translate/core';import { TranslateHttpLoader } from '@ngx-translate/http-loader';import { AppComponent } from './app.component';export function createTranslateHttpLoader(http: Http) { return new TranslateHttpLoader(http, './assets/i18n/', '.json');}@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: (createTranslateHttpLoader), deps: [Http] } }) ], providers: [], bootstrap: [AppComponent]})export class AppModule { }

import { TranslateService } from "@ngx-translate/core"; constructor(public translateService: TranslateService) { }  ngOnInit() { // --- set i18n begin --- this.translateService.addLangs(["zh", "en"]); this.translateService.setDefaultLang("zh"); const browserLang = this.translateService.getBrowserLang(); this.translateService.use(browserLang.match(/zh|en/) ? browserLang : 'zh'); // --- set i18n end --- }

import { Component } from '@angular/core';import { TranslateService } from "@ngx-translate/core";@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent { title = 'app'; constructor(public translateService: TranslateService) { } ngOnInit() { // --- set i18n begin --- this.translateService.addLangs(["zh", "en"]); this.translateService.setDefaultLang("zh"); const browserLang = this.translateService.getBrowserLang(); this.translateService.use(browserLang.match(/zh|en/) ? browserLang : 'zh'); // --- set i18n end --- }}

<div> <span> test the i18n module: ngx-translate</span> <h1>{{ 'hello' | translate }}</h1></div>

{ "hello": "the word is hello"}

{ "hello": "你好"}