ngx-翻译问题与离子3应用程序

Question

ngx翻译离子3应用程序不为我工作。下面是我的代码：

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { ErrorHandler, NgModule } from '@angular/core'; 
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; 
import { HttpModule,Http } from '@angular/http'; 
import { IonicStorageModule } from '@ionic/storage'; 

import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; 
import { TranslateHttpLoader } from '@ngx-translate/http-loader'; 

import { MyApp } from './app.component'; 
import { StatusBar } from '@ionic-native/status-bar'; 
import { SplashScreen } from '@ionic-native/splash-screen'; 



export function createTranslateLoader(http: Http) { 
    return new TranslateHttpLoader(http, './assets/i18n/', '.json'); 
} 

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

app.component.ts

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


@Component({ 
    templateUrl: 'app.html' 
}) 

export class MyApp { 
    @ViewChild(Nav) nav: Nav; 
    public rootPage: any; 

    constructor(public platform: Platform, 
    public statusBar: StatusBar, 
    public splashScreen: SplashScreen, 
    public storage: Storage, 
    public translate: TranslateService) { 

    this.storage.get('AppLangcode') 
      .then((AppLangcode) => { 
      if(AppLangcode==null){ 
       translate.setDefaultLang('en'); 
      }else{ 
       translate.setDefaultLang(AppLangcode); 
      } 
      }) 
    } 

    initializeApp() { 
    this.platform.ready().then(() => { 
     this.statusBar.styleDefault(); 
     this.splashScreen.hide(); 
     this.menu.swipeEnable(false); 

    }); 
    } 
} 

在上面的文件我检查中存储的偏好本地数据库，然后将其设置为加载应用程序的默认语言。

我RootPage home.module.ts

import { NgModule } from '@angular/core'; 
import { IonicPageModule } from 'ionic-angular'; 
import { HomePage } from './home'; 
import { TranslateModule } from '@ngx-translate/core'; 

@NgModule({ 
    declarations: [ 
    HomePage, 
    ], 
    imports: [ 
    IonicPageModule.forChild(HomePage), 
    TranslateModule.forChild() 
    ], 
    exports: [ 
    HomePage 
    ] 
}) 
export class HomePageModule {} 

home.ts

import { Component} from '@angular/core'; 
import { IonicPage, NavController, NavParams } from 'ionic-angular'; 
import { Storage } from '@ionic/storage'; 
import { TranslateService } from '@ngx-translate/core'; 

@IonicPage() 
@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

    constructor(public navCtrl: NavController, 
    public navParams: NavParams, 
    public storage: Storage, 
    public translate: TranslateService,) { 

    } 

    ionViewDidLoad() { 
    //console.log('ionViewDidLoad HomePagePage'); 
    } 

} 

home.html的

<ion-header> 
    <ion-navbar color='navbarColor'> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title><img src="assets/icon/logo.png" alt="Ionic logo"></ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content class="grid-basic-page"> 
    <ion-grid> 
     <ion-row> 
      <ion-col (click)="openPage('QuickBookPage');"> 
      <div><img src="assets/icon/icon-book-cylinder.png">{{"quick_book_pay" | translate}}</div> 
      </ion-col> 
      <ion-col (click)="openPage('RefilHistoryPage');"> 
      <div><img src="assets/icon/icon-quickpay.png">{{"refil_history" | translate}}</div> 
      </ion-col> 
     </ion-row> 

     <ion-row> 
      <ion-col (click)="openPage('ServicesPage');"> 
      <div><img src="assets/icon/icon-mechanic.png">{{"service_request" | translate}}</div> 
      </ion-col> 
      <ion-col> 
      <button [disabled]="!clickhandle" (click)="emergencyCall();"><img src="assets/icon/icon-emergency.png">{{"emergency_helpline" | translate}}</button> 
      </ion-col> 
     </ion-row> 
    </ion-grid> 

</ion-content> 

侧面菜单页language.ts

import { Component } from '@angular/core'; 
import { IonicPage, NavController, NavParams,Events } from 'ionic-angular'; 
import { NgForm,FormBuilder, FormGroup, Validators } from '@angular/forms'; 
import { TranslateService } from '@ngx-translate/core'; 
import { Storage } from '@ionic/storage'; 


@IonicPage() 
@Component({ 
    selector: 'page-language', 
    templateUrl: 'language.html', 
}) 
export class LanguagePage { 
    public langform:FormGroup; 
    public langcod:string; 

    constructor(public navCtrl: NavController, 
    public navParams: NavParams, 
    public formBuilder: FormBuilder, 
    public translate: TranslateService, 
    public storage: Storage) { 

    this.storage.get('AppLangcode') 
      .then((AppLangcode) => { 

      if(AppLangcode==null){ 
       this.langcod = 'en'; 
       this.langform.get('langcode').setValue(this.langcod); 
      }else{ 
       this.langcod = AppLangcode; 
       this.langform.get('langcode').setValue(this.langcod); 
      } 
      }) 

    this.langform = formBuilder.group({ 
     langcode: [this.langcod, Validators.required] 
    }); 
    } 

    langselect(form: NgForm){ 
    let langselcode = this.langform.value.langcode; 
    this.storage.set('AppLangcode', langselcode); 
    this.translate.setDefaultLang(langselcode); 
    this.translate.use(langselcode); 
    } 

} 

language.module.ts

import { NgModule } from '@angular/core'; 
import { IonicPageModule } from 'ionic-angular'; 
import { LanguagePage } from './language'; 
import { TranslateModule } from '@ngx-translate/core'; 

@NgModule({ 
    declarations: [ 
    LanguagePage, 
    ], 
    imports: [ 
    IonicPageModule.forChild(LanguagePage), 
    TranslateModule.forChild() 
    ], 
    exports: [ 
    LanguagePage 
    ] 
}) 
export class LanguagePageModule {} 

language.html

<ion-header> 
<ion-navbar color='navbarColor'> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title><img src="assets/icon/logo.png" alt="Ionic logo"></ion-title> 
    </ion-navbar> 
</ion-header> 


<ion-content padding> 
<form [formGroup]="langform" (submit)="langselect($event)"> 

    <ion-list radio-group formControlName="langcode"> 
     <ion-row responsive-sm> 
     <ion-col col-6> 
      <ion-item> 
       <ion-label>{{"english" | translate}}</ion-label> 
       <ion-radio value="en" checked></ion-radio> 
      </ion-item> 
      <ion-item> 
       <ion-label>{{"hindi" | translate}}</ion-label> 
       <ion-radio value="hi"></ion-radio> 
      </ion-item> 
     </ion-col> 
    </ion-row> 

    </ion-list> 

    <ion-row responsive-sm> 
     <ion-col> 
     <button ion-button block type="submit" [disabled]="!langform.valid"> 
      Submit 
     </button> 
     </ion-col> 
    </ion-row> 
    </form> 

</ion-content> 

en.json

{ 
    "english" : "English", 
    "hindi"  : "हिंदी", 

    "quick_book_pay":"Quick Book & Pay", 
    "refil_history":"Refill History", 
    "service_request":"Service Request", 
    "emergency_helpline":"Emergency Helpline" 
} 

hi.json

{ 
    "english" : "English", 
    "hindi"  : "हिंदी", 

    "quick_book_pay":"त्वरित बुक और भुगतान करें", 
    "refil_history":"रीफिल इतिहास", 
    "service_request":"सेवा अनुरोध", 
    "emergency_helpline":"आपातकालीन हेल्पलाइन" 
} 

在改变语言显示它keys，而不是翻译。请让我知道我在做什么错误？

Answer 1

我已经更新了我的语言模块，这对我有用，不知道这是否正确的方式，但它的工作。

import { NgModule } from '@angular/core'; 
import { IonicPageModule } from 'ionic-angular'; 
import { LanguagePage } from './language'; 
import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; 
import { TranslateHttpLoader } from '@ngx-translate/http-loader'; 
import { HttpModule,Http } from '@angular/http'; 

export function createTranslateLoader(http: Http) { 
    return new TranslateHttpLoader(http, './assets/i18n/', '.json'); 
} 

@NgModule({ 
    declarations: [ 
    LanguagePage, 
    ], 
    imports: [ 
    IonicPageModule.forChild(LanguagePage), 
    TranslateModule.forChild({ 
      loader: { 
         provide: TranslateLoader, 
         useFactory: (createTranslateLoader), 
         deps: [Http] 
        } 

     }) 
    ], 
    exports: [ 
    LanguagePage 
    ] 
}) 
export class LanguagePageModule {} 

我已经在language.module.ts

语言增加了对孩子和出口TranslateHttpLoader装载机。TS

langselect(form: NgForm){ 
    let langselcode = this.langform.value.langcode; 
    this.storage.set('AppLangcode', langselcode); 
    this.translate.use(langselcode); 
    } 

Answer 2

我花了很多时间来得到它离子3.工作。最后我不得不HttpClientModule添加到app.module.ts的进口部分。希望有所帮助。

[2]：使用HttpClient的而不是HTTP

[3]：添加HttpClientModule

[4]：使用HttpClient的而不是HTTP

SRC /应用/ app.module.ts ：

import {HttpClient, HttpClientModule} from "@angular/common/http"; 
import {HttpModule, RequestOptions, XHRBackend} from '@angular/http'; 
import {TranslateModule, TranslateLoader} from '@ngx-translate/core'; 
import {TranslateHttpLoader} from '@ngx-translate/http-loader'; 

export function createTranslateLoader(http: HttpClient [2]) { 
    return new TranslateHttpLoader(http, './assets/i18n/', '.json'); 
} 

@NgModule({ 
    ... 
    imports: [ 
     BrowserModule, 
     HttpModule, 
     HttpClientModule [2], 
     TranslateModule.forRoot({ 
      loader: { 
       provide: TranslateLoader, 
       useFactory: createTranslateLoader, 
       deps: [HttpClient] [3] 
      } 
     ... 
    ... 
}), 

的src /页/ [你的页]/[你的页] .module.ts

imports: [ 
    IonicPageModule.forChild(LoginPage), 
    TranslateModule.forChild(), 

]，

Answer 3

最后，我通过一个在app.module.ts进口部分使用HttpClientModule解决这个问题。也许它有帮助。

第一次：导入HttpClientModule 第二次：使用HttpClient而不是Http。

所以，代码如下：app.module.ts

import { NgModule } from '@angular/core'; 
import { IonicPageModule } from 'ionic-angular'; 
import { HomePage } from './home'; 

//translate related imports 
import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; 
import { TranslateHttpLoader } from '@ngx-translate/http-loader'; 
import { HttpClientModule, HttpClient } from '@angular/common/http'; 

@NgModule({ 
    declarations: [ 
     HomePage, 
    ], 
    imports: [ 
    IonicPageModule.forChild(HomePage), 
    HttpClientModule 
    TranslateModule.forRoot({ 
     loader: { 
      provide: TranslateLoader, 
      useFactory: (createTranslateLoader), 
      deps: [HttpClient ] 
     } 
    }) 
    ], 
    exports: [ 
    HomePage 
    ] 
}) 

export class HomePageModule {} 

export function createTranslateLoader(http: HttpClient) { 
    return new TranslateHttpLoader(http, './assets/i18n/', '.json'); 
} 

在app.component.ts在constructor加入这一行。

import {TranslateService} from '@ngx-translate/core'; 
... 
translate.setDefaultLang('en');//So English language set 

然后你有./assets/i18n/路径创建两个JSON文件。

en.JSON

{ 
    "title": "Translation demo", 
    "text": "This is a simple demonstration app for {{value}}" 
} 

在您的应用程序，然后使用带有PIPE过滤器这样的。

<h1>{{'title' | translate}}</h1> 

OR

<h1 [translate]="'title'"></h1> 

我们也可以传递一个parameter。

<h1>{{'text' | translate:{'value':'ngx-translate'} }}</h1> 

OR

<h1 [translate]="'text'" [translateParams]="{value: 'ngx-translate'}"></h1>