Angular with ng2-translate仅适用于主页

Question

我使用的是Ionic框架v3.0.1，我已经一步一步地遵循了https://javebratt.com/angular-translate-ionic/教程，并且在主页上运行得很好。

但我已经创建了第二个语言，当我试图在构造函数中设置语言时，我无法访问在主页上选择的语言(当前语言未定义)。下面是我的代码：

app.module.ts

import { TranslateService, TranslateModule, TranslateStaticLoader,  TranslateLoader } from 'ng2-translate/ng2-translate';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';


@NgModule({
 declarations: [
 MyApp,
 HomePage    
 ],
 imports: [
  IonicModule.forRoot(MyApp),
  TranslateModule.forRoot({
  provide: TranslateLoader,
  useFactory: (createTranslateLoader),
  deps: [Http]
 })
 ],
 bootstrap: [IonicApp],
 entryComponents: [
 MyApp,
 HomePage  
 ],
 providers: [
 {provide: ErrorHandler, useClass: IonicErrorHandler}
 ]
 })
 export class AppModule {}

 export function createTranslateLoader(http: Http) {
 return new TranslateStaticLoader(http, 'assets/i18n', '.json');
 }

app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { TranslateService } from 'ng2-translate';
import { HomePage } from '../pages/home/home';

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

  constructor(platform: Platform, translate: TranslateService) {
    translate.setDefaultLang('es');
  }
}

home.ts (我在这里选择语言)

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { TranslateService } from 'ng2-translate';

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

  public items : any = [];
  constructor(public navCtrl: NavController,
               public http   : Http, public translateService: TranslateService) {                 
  }  

   // Allow navigation to the userSignUp page for creating a new entry
   addEntry()
   {
      this.navCtrl.push('UserSignUp');
   }


   // Allow navigation to the userSignUp page for amending an existing entry
   viewEntry(param)
   {
      this.navCtrl.push('UserSignUp', param);
   }

   //Translation functions
   translateToSpanish(){
    this.translateService.use('es');
  }

  translateToEnglish(){
    this.translateService.use('en');
  }
}

user-sign-up.ts (我想在这里设置之前在home中选择的语言)

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { Http, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';
import { TranslateService } from 'ng2-translate';

@IonicPage()
@Component({
  selector: 'page-user-sign-up',
  templateUrl: 'user-sign-up.html'
})
export class UserSignUp {

  // Initialise module classes
   constructor(public translateService: TranslateService)
   {          
      translateService.use(translateService.currentLang);          
   }
}

user-sign-up.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { UserSignUp } from './user-sign-up';
import { TranslateModule, TranslateStaticLoader, TranslateLoader } from 'ng2-translate/ng2-translate';
import { Http } from '@angular/http';

@NgModule({
  declarations: [
    UserSignUp,
  ],
  imports: [
    IonicPageModule.forChild(UserSignUp),
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (createTranslateLoader),
      deps: [Http]
    })
  ],
  exports: [
    UserSignUp
  ]
})
export class UserSignUpModule {}

export function createTranslateLoader(http: Http) {
  return new TranslateStaticLoader(http, 'assets/i18n', '.json');
}

Answer 1

更改为ngx-translate并添加到您需要使用转换管道TranslateModule.forChild()的任何module.ts，并且运行正常