Ionic framework 语言的变化并不意味着'；I don’我不能在爱奥尼亚3号马上工作

我使用的是带有@ngx translate/core 9.1.1和@ngx translate/httploader 2.0.1的离子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>

{{language.text}

我所期望的是，当我使用例如this.translate.use（“fr”）时，我会返回主页，所有要翻译成法语的内容。好像不是这样的

---

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

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

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

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

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