Angular mit ng2-translate funktioniert nur auf der Homepage

Question

Ich benutze Ionic Framework v3.0.1 und ich habe dieses tutto https://javebratt.com/angular-translate-ionic/ Schritt für Schritt gefolgt und funktioniert gut auf der Homepage.

Aber ich habe eine zweite erstellt und ich habe keinen Zugriff auf die Sprache auf der Homepage ausgewählt (aktuelle Sprache ist nicht definiert), wenn ich versuche, die Sprache im Konstruktor einzustellen. Hier ist mein 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 (Wo ich die Sprache wählen)

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

Benutzer -sign-up.ts (Wo ich die Sprache festlegen möchte, die zuvor in Heim ausgewählt wurde)

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

Benutzer-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

geändert NGX-zu übersetzen und zu irgendwelchen module.ts Sie die Übersetzung Rohr TranslateModule.forChild verwenden müssen() und funktioniert gut