离子 3 中的语言更改不会立即生效

Question

我将 ionic cli 4.6.0 与@ngx-translate/core 9.1.1 和@ngx-translate/http-loader 2.0.1 一起使用。页面延迟加载，而 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');
    });
  }
}

我创建了一个页面设置，其中有一个 select 框，该框在更改时将语言设置为新的输入，即 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") 和我 return 到主页的所有内容都被翻译成法语。好像不是这样的

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

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" 属性的地方更改语言，就会使用新语言呈现。

离子 3 中的语言更改不会立即生效

Change of language doesn't work instantly in ionic 3

multilingual

ionic-framework