Question

我正在尝试开发一个支持多语言的应用程序。应用程序的基本流程是通过Cordova Globalization读取语言环境，即“@ ionic-native / globalization”，并将语言区域设置从“@ ngx-translate / core”设置为TranslateService进行文本翻译。

请参考下面的代码并指导我即使在android运行后也能使翻译工作。具有讽刺意味的是，使用相同的代码转换在浏览器中工作正常:(

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;
  userName: any;

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

    this.translateService.setDefaultLang('en');
    this.translateService.use('en');

    //this.translateService.setDefaultLang('fr');
    //this.translateService.use('fr');

    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.globalization.getPreferredLanguage()
      .then(result => {
      // To check and convert language locale
      let languageCode = this.getSuitableLanguage(result.value);

      this.translateService.setDefaultLang(languageCode);
      this.translateService.use(languageCode);
    })
    .catch(e => {
      let alert = this.alertCtrl.create({
        title: 'Error',
        subTitle: e,
        buttons: ['OK']
      });
      alert.present();
    });
});
    });
  }

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

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

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { IonicStorageModule } from '@ionic/storage';
import { HTTP } from '@ionic-native/http';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { Globalization } from '@ionic-n5 ative/globalization';

import { MyApp } from './app.component';
import { LoginPage } from '../pages/login/login';

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

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

的login.html

<ion-header>
  <ion-toolbar color="light">
    <ion-title>
        LOGIN
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding class="noContentScrollbar" scroll="false" scrollbar-x="false" scrollbar-y="false">
  <div class="spacer" style="height:100px;" id="login-spacer2"></div>

  <ion-list inset>
    <ion-item>
      <ion-input 
        id="idUserName" 
        type="text" 
        placeholder="{{'Login.user' | translate }}" 
        [(ngModel)]="usercreds.name"></ion-input>
      <ion-icon name="person" item-right></ion-icon>
    </ion-item>

    <ion-item>
      <ion-input 
        id="idPassword" 
        type="password" 
        placeholder="{{'Login.password' | translate }}" 
        [(ngModel)]="usercreds.password"></ion-input>
      <ion-icon name="key" item-right></ion-icon>
    </ion-item>
  </ion-list>

  <div padding>
    <button ion-button color="primary" block>
      {{'Login.btn_loginCaps' | translate }}
    </button>
  </div>
</ion-content>

en.json

{
    "Login" : {
        "user" : "User",
        "password" : "Password",
        "btn_loginCaps" : "LOGIN"
    }
}

fr.json

{
    "Login" : {
        "user" : "*User",
        "password" : "*Password",
        "btn_loginCaps" : "*LOGIN"
    }
}

我正在研究法语翻译，但是我刚刚放* 在文本之前。

在应用运行

后，

结果在移动设备中显示

结果在Ionic lab（浏览器）中查找，代码相同（无变化）

帮助我纠正我的代码，使得即使在android build / run之后也能运行翻译。

Answer 1

经过漫长的研发后，我终于在代码中发现了一个错误。在 app.module.ts 中查找功能

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

将以下代码替换为上述功能

中的代码

return new TranslateHttpLoader(http, './assets/i18n/', '.json');

那就是它。希望这个例子也可以帮助您解决问题。

Ionic 2：在android构建之后翻译不起作用，但相同的代码在浏览器

1 个答案: