Question

在 app.component.ts 构造函数中，在平台准备就绪后，我使用Cordova Globalization在移动设备中获取当前首选的语言环境语言，同时我也调用TranslateService翻译文本。

在Logic.ts中，我正在调用一个本地函数来翻译文本，我将在加载控制器时使用该文本，当用户点击登录按钮时，将“Authenticate”显示为文本。

问题在于初始加载时翻译不起作用，但是当您退出并返回相同的登录页面时，翻译工作。我认为翻译已加载，但没有反映，因此您无法在UI中看到它，但当您重新进入同一页面时，您会看到翻译工作正常。

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, AlertController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { TranslateService } from '@ngx-translate/core';
import { Globalization } from '@ionic-native/globalization';

import { LoginPage } from '../pages/login/login';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  rootPage:any = LoginPage;
 i18nObj: any = {};

  constructor(
    platform: Platform, 
    statusBar: StatusBar, 
    public alertCtrl: AlertController,
    splashScreen: SplashScreen,
    private translateService: TranslateService,
    private globalization: Globalization) {

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

      // To initialize English as our default language 
      this.translateService.setDefaultLang('en');
      this.translateService.use('en');

      this.globalization.getPreferredLanguage()
        .then(result => {
          // To check and convert language into code
          let languageCode = this.getSuitableLanguage(result.value);

          // To set locale language          
          this.translateService.setDefaultLang(languageCode);
          this.translateService.use(languageCode);
        })
        .catch(e => {
          let alert = this.alertCtrl.create({
            title: this.i18nObj.alert_error,
            subTitle: e,
            buttons: [this.i18nObj.alert_btn_OK]
          });
          alert.present();
        });
    });

    this.convertText();
  }

  convertText () {
    this.translateService.get('Alert.btn_OK').subscribe(t => {
      this.i18nObj.alert_btn_OK = t;
    });
    this.translateService.get('Alert.error').subscribe(t => {
      this.i18nObj.alert_error = t;
    });
  }

  getSuitableLanguage(languageCode) {
    let langCode = languageCode.substring(0, 2).toLowerCase();

    switch(langCode){
      case 'en' : {
        return 'en';
      }
      case 'fr' : {
        return 'fr';
      }
      default : {
        return 'en';
      }
    }
  }

}

login.ts

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

import { HomePage } from '../home/home';
import { AuthenticationProvider } from '../../providers/authentication/authentication';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

  usercreds: any;
  loader: any;
  service: any;
  i18nObj: any = {};

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public loginCtrl: LoadingController,
    public events: Events,
    public authService: AuthenticationProvider, 
    public alertCtrl: AlertController,
    private translateService: TranslateService) {
    this.usercreds = {
      name: '',
      password: ''
    }
    this.service= authService;

    this.convertText();
  }

  login(user) {
    if((user.password !== "") || (user.name !== "") ){
      this.loader = this.loginCtrl.create({
        content: this.i18nObj.alert_logginIn
      });
      this.loader.present();

      this.service.authLogIn(user).then(data => {
        // ....logic to check and response and nav To home page

        this.clearLoginFields();                                          // To clear login fields
      });
    } else {
      let alert = this.alertCtrl.create({
        title: this.i18nObj.alert_userAndPassEmpty,
        subTitle: this.i18nObj.alert_userAndPassEmpty_subtitle,
        buttons: ['OK']
      });
      alert.present();
      this.clearLoginFields();
    }
  }

  private clearLoginFields() {
    this.usercreds.name = "";
    this.usercreds.password = "";
  }

  convertText () {
    this.translateService.get('Alert.logginIn').subscribe(t => {
      this.i18nObj.alert_logginIn = t;
    });
    this.translateService.get('Alert.userAndPassEmpty').subscribe(t => {
      this.i18nObj.alert_userAndPassEmpty = t;
    });
    this.translateService.get('Alert.userAndPassEmpty_subtitle').subscribe(t => {
      this.i18nObj.alert_userAndPassEmpty_subtitle = t;
    });
  }

}

en.json

{
    "Alert" : {
        "logginIn" : "Logging in",
        "userAndPassEmpty" : "User and Password fields cannot be empty",
        "userAndPassEmpty_subtitle" : "Please try again",
        "btn_OK" : "OK",
        "error" : "Error"
    }
}

结果：初始加载时

重新访问相同的视图后

谁能告诉我，我做错了什么？我必须在我的代码中进行哪些更正，以便翻译在初始视图加载时也可以在 ts 文件中工作。

Answer 1

我在初始页面上添加了5秒的延迟，然后翻译为我工作了。由于异步调用翻译，我没有得到翻译文本，因为它显示的是密钥而不是文本。

Ionic 2：从构造函数触发时，TranslateService在初始加载时不起作用

1 个答案: