Question

我正在使用Ionic framework v3.0.1，并且我已经一步一步地按照这个tutto 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（我想设置之前在家中选择的语言）

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

用户登录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并添加到任何module.ts您需要使用翻译管道TranslateModule.forChild（）并且工作正常

Angular with ng2-translate仅适用于主页

1 个答案: