Смена языка не работает мгновенно в ионном 3 - PullRequest
Новая
       13

Смена языка не работает мгновенно в ионном 3

0 голосов
/ 29 декабря 2018

Я использую 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');
    });
  }
}

Я создал страницу настроек, в которой у меня есть поле выбора, которое при изменении устанавливает язык для нового ввода, т.е. 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"), и я возвращаюсь на домашнюю страницу, чтобы все было переведено на французский.Кажется, что это не работает так.

Как я могу достичь чего-то подобного?

1 Ответ

0 голосов
/ 24 января 2019

На всякий случай, если кому-то это нужно.Я использовал 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, оно отображается с новым языком.

...