0

I'm using Ionic framework v3.0.1 and I've followed this tutto https://javebratt.com/angular-translate-ionic/ step by step and works fine at home page.

But i've created a second one and I don't have access to the language selected at home page (current language is undefined) when I try to set the language at the constructor. Here's my code:

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 (Where I choose the language)

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 (Where I want to set the language previously selected in 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');
}
Jorj0
  • 1

1 Answers1

0

Changed to ngx-translate and added to any module.ts you need to use the translation pipe TranslateModule.forChild() and works fine

Jorj0
  • 1