Ionic 3 + ngx-translate + Lazy Loading

使用到的第三方库：

• ngx-translate
• ngx-translate-extract

注意：这篇文章使用的是 Angular 5 和 ngx-translate 9

新建项目

ionic start translation-demo blank
cd translation-demo

安装 ngx-translate 和 ngx-translate-extract

npm install @ngx-translate/core@9 --save
npm install @ngx-translate/http-loader@2 --save
npm install @biesbjerg/ngx-translate-extract --save-dev

在 package.json 添加：

"scripts": {
    "extract-translations": "ngx-translate-extract --input ./src --output ./src/assets/i18n/*.json --clean --sort --format namespaced-json --marker _"
}

初始化

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';

// import ngx-translate and the http loader
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient, HttpClientModule } from '@angular/common/http';

// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
})
export class AppModule { }

app.component.ts:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import {TranslateService} from '@ngx-translate/core';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = 'HomePage';

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, translate: TranslateService) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
      translate.setDefaultLang('en');
    });
  }
}

实现切换语言功能

home.ts:

import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
import { TranslateService } from '@ngx-translate/core';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(private translate: TranslateService) { }

  useLanguage(language: string) {
    this.translate.setDefaultLang(language);
  }

}

home.html:

  
    
      {{ 'home.title' | translate }}
    
  



  en
  zh

home.module.ts:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { TranslateModule } from '@ngx-translate/core';

@NgModule({
    declarations: [
        HomePage,
    ],
    imports: [
        IonicPageModule.forChild(HomePage),
        TranslateModule
    ],
})
export class HomePageModule { }

在项目根目录下执行以下命令：

npm run extract-translations

结果在 assets/i18n/ 目录下会生成 *.json文件：

{
    "home": {
        "title": ""
    }
}

接着在此目录下以 *.json 文件为模版，新建语言文件 en.json 和 zh.json，内容分别为:

{
    "home": {
        "title": "welcome"
    }
}

{
    "home": {
        "title": "你好"
    }
}

至此，便完成了语言国际化支持。