在 ionic 3 中语言的更改不会立即生效

Question

我正在使用带有 @ngx-translate/core 9.1.1 和 @ngx-translate/http-loader 2.0.1 的 ionic cli 4.6.0。当 ngx-translate 用作共享模块时，页面是延迟加载的，即

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 { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { IonicStorageModule } from '@ionic/storage';

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

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

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

。在 app.component.ts 中，每当我将默认值设置为应用程序重新启动时它按预期工作的任何语言时，即 translate.setDefaultLang('en') 以英语显示语言，而 translate.setDefaultLang('fr') 以法语显示。

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';
import { Storage } from '@ionic/storage';

import { Logger } from '../providers/logger';

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

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,
              translate:TranslateService,storage:Storage,logger:Logger) {
    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();
      // this language will be used as a fallback when a translation isn't found in the current language
       translate.setDefaultLang('en');
    });
  }
}

我创建了一个页面设置，其中有一个选择框，在更改时将语言设置为新输入，即 settings.ts

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

/**
 * Generated class for the SettingsPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

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

  languages:any[] = [
    {value:"en",text:"English"},
    {value:"fr",text:"French"}
  ];

  selectedLanguage:string = "en";

  constructor(public navCtrl: NavController, public navParams: NavParams,private translate: TranslateService) {

  }

  onChangeLanguage(selectedLanguage:string){
   this.translate.use(selectedLanguage);
  }

}

在settings.html中

  <select [ngModel]="selectedLanguage" (ngModelChange)="onChangeLanguage($event)">
    <option [value]="language.value" *ngFor="let language of languages">{{language.text}}</option>
  </select>

我期望的是当我使用例如this.translate.use("fr") 然后我返回主页，所有要翻译成法语的东西。好像不行啊。

我怎样才能实现这样的目标？

Answer 1

以防万一有人需要。我使用了onLangChange，这是一个可观察的。我使用它的方式

import { NgModule, ElementRef, ViewChild } from '@angular/core';
import { trigger, state, style, animate,transition, query} from '@angular/animations';
import { Observable, Subscription } from 'rxjs/Rx';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { IonicPage } from 'ionic-angular';
import { TranslateService,LangChangeEvent} from '@ngx-translate/core';


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

  private items:any=[];
  constructor(public navCtrl: NavController,private translate: TranslateService) {

  }

  ionViewDidLoad(){

    this.translate.onLangChange.subscribe((event: LangChangeEvent) => {


      this.items=[this.translate.instant("Word1"),this.translate.instant("Word2")];


    });
  }
}

因此，无论何时使用“items”属性更改语言，都会使用新语言呈现。