离子3 app的ngx-translation问题 [英] ngx-translation issue with ionic 3 app

问题描述

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

app.module.ts

 从'@ angular / platform-b​​rowser'导入{BrowserModule};来自'@ angular / core'的
 import {ErrorHandler，NgModule};来自'ionic-angular'的
 import {IonicApp，IonicErrorHandler，IonicModule};来自'@ angular / http'的
 import {HttpModule，Http};来自'@ ionic / storage'的
 import {IonicStorageModule}; 
 
从'@ngx-translate / core'导入{TranslateModule，TranslateLoader};来自'@ngx-translate / http-loader'的
 import {TranslateHttpLoader}; $。b 
 $ b从'./app.component'导入{MyApp};来自'@ ionic-native / status-bar'的
 import {StatusBar};来自'@ ionic-native / splash-screen'的
 import {SplashScreen}; 
 
 
 
导出函数createTranslateLoader（http：Http）{
返回新的TranslateHttpLoader（http，'。/ assets / i18n /'，'。json'）; 
} 
 
 @NgModule（{
声明：[
 MyApp 
]，
导入：[
 BrowserModule，
 HttpModule，
 IonicStorageModule.forRoot（），
 TranslateModule.forRoot（{
 loader：{
提供：TranslateLoader，
 useFactory：（createTranslateLoader），
 deps：[Http] 
} 
}），
 IonicModule.forRoot（MyApp），
]，
 bootstrap：[IonicApp]，
 entryComponents：[
 MyApp 
]，
提供者：[
 StatusBar，
 SplashScreen，
 {提供：ErrorHandler，useClass：IonicErrorHandler}，
] 
}）
导出类AppModule {} 
  

app.component.ts

 从'@angular导入{Component，ViewChild} /核心'; 
从'ionic-angular'导入{导航，平台};来自'@ ionic-native / status-bar'的
 import {StatusBar};来自'@ ionic-native / splash-screen'的
 import {SplashScreen};来自'@ ionic / storage'的
 import {Storage};来自'@ngx-translate / core'的
 import {TranslateService}; 
 
 
 @Component（{
 templateUrl：'app.html'
}）
 
导出类MyApp {
 @ ViewChild（Nav）nav：Nav; 
 public rootPage：any; 
 
构造函数（公共平台：平台，
公共statusBar：StatusBar，
公共splashScreen：SplashScreen，
公共存储：存储，
公共翻译：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

 从'@ angular / core'导入{NgModule};来自'ionic-angular'的
 import {IonicPageModule};来自'./home'的
 import {HomePage};来自'@ngx-translate / core'的
 import {TranslateModule}; 
 
 @NgModule（{
声明：[
主页，
]，
导入：[
 IonicPageModule.forChild（HomePage），
 TranslateModule.forChild（）
]，
出口：[
首页
] 
}）
导出类HomePageModule {} 
  

home.ts

 从'@ angular / core'导入{Component}; 
从'ionic-angular'导入{IonicPage，NavController，NavParams};来自'@ ionic / storage'的
 import {Storage};来自'@ngx-translate / core'的
 import {TranslateService}; 
 
 @IonicPage（）
 @Component（{
 selector：'page-home'，
 templateUrl：'home.html'
}）
导出类主页{
 
构造函数（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.pngalt =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|翻译}}< / DIV> 
< / ion-col> 
< ion-col（click）=openPage（'RefilHistoryPage'）;> 
< div>< img src =assets / icon / icon-quickpay.png> {{refil_history|翻译}}< / DIV> 
< / ion-col> 
< / ion-row> 
 
< ion-row> 
< ion-col（click）=openPage（'ServicesPage'）;> 
< div>< img src =assets / icon / icon-mechanic.png> {{service_request|翻译}}< / DIV> 
< / ion-col> 
< ion-col> 
< button [disabled] =！clickhandle（click）=emergencyCall（）;>< img src =assets / icon / icon-emergency.png> {{emergency_helpline |翻译}}< /按钮> 
< / ion-col> 
< / ion-row> 
< / ion-grid> 
 
< / ion-content> 
  

Side Menu Page language.ts

 从'@ angular / core'导入{Component};来自'ionic-angular'的
 import {IonicPage，NavController，NavParams，Events};来自'@ angular / forms'的
 import {NgForm，FormBuilder，FormGroup，Validators};来自'@ngx-translate / core'的
 import {TranslateService};来自'@ ionic / storage'的
 import {Storage}; 
 
 
 @IonicPage（）
 @Component（{
 selector：'page-language'，
 templateUrl：'language.html'，
}）
导出类LanguagePage {
 public langform：FormGroup; 
 public langcod：string; 
 
构造函数（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（形式：NgForm）{
 let langselcode = this.langform.value.langcode; 
 this.storage.set（'AppLangcode'，langselcode）; 
 this.translate.setDefaultLang（langselcode）; 
 this.translate.use（langselcode）; 
} 
 
} 
  

language.module.ts

 从'@ angular / core'导入{NgModule};来自'ionic-angular'的
 import {IonicPageModule};来自'./language'的
 import {LanguagePage};来自'@ngx-translate / core'的
 import {TranslateModule}; 
 
 @NgModule（{
声明：[
 LanguagePage，
]，
进口：[
 IonicPageModule.forChild（LanguagePage），
 TranslateModule.forChild（）
]，
出口：[
 LanguagePage 
] 
}）
导出类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.pngalt =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|翻译}}< /离子标签> 
< ion-radio value =en已检查>< / ion-radio> 
< / ion-item> 
< ion-item> 
< ion-label> {{hindi|翻译}}< /离子标签> 
< 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> 
提交
< / button> 
< / ion-col> 
< / ion-row> 
< / form> 
 
< / ion-content> 
  

en.json

  {
english：English，
hindi：हिंदी，
 
quick_book_pay：Quick Book& Pay，
refil_history：补充历史记录，
service_request：服务请求，
emergency_helpline： 紧急求助热线
} 
  

hi.json

  {
english：English，
hindi ：हिंदी，
 
quick_book_pay：त्वरितबुकऔरभुगतानकरें，
refil_history：रीफिलइतिहास，
service_request：सेवाअनुरोध ，
emergency_helpline：आपातकालीनहेल्पलाइन
} 
  

关于更改语言它显示键而不是翻译。请让我知道我在做什么错误？

解决方案

我更新了我的语言模块，这对我有用，不知道是否这是正确的方法，但它有效。

 从'@ angular / core'导入{NgModule};来自'ionic-angular'的
 import {IonicPageModule};来自'./language'的
 import {LanguagePage}; 
从'@ngx-translate / core'导入{TranslateModule，TranslateLoader};来自'@ngx-translate / http-loader'的
 import {TranslateHttpLoader};来自'@ angular / http'的
 import {HttpModule，Http}; 
 
导出函数createTranslateLoader（http：Http）{
返回新的TranslateHttpLoader（http，'。/ assets / i18n /'，'。json'）; 
} 
 
 @NgModule（{
声明：[
 LanguagePage，
]，
进口：[
 IonicPageModule.forChild （LanguagePage），
 TranslateModule.forChild（{
 loader：{
提供：TranslateLoader，
 useFactory：（createTranslateLoader），
 deps：[Http] 
} 
 
}）
]，
出口：[
 LanguagePage 
] 
}）
导出类LanguagePageModule {} 
  

我为子项添加了加载程序并在 language.module.ts中导出了TranslateHttpLoader

language.ts

  langselect（form：NgForm）{
 let langselcode = this.langform.value.langcode; 
 this.storage.set（'AppLangcode'，langselcode）; 
 this.translate.use（langselcode）; 
} 
  

ngx translation with ionic 3 app not working for me. below is my code:

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

    });
  }
}

In above file i am checking storage preference in local db and then set it to default language on load application.

My 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>

Side Menu Page 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":"आपातकालीन हेल्पलाइन"
}

On change language it show keys instead translation. Please let me know what wrong i am doing ?

解决方案

i have updated my language module and this worked for me, not sure if this is right way but it's worked.

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 {}

i have added loader for child and export TranslateHttpLoader in language.module.ts

language.ts

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

这篇关于离子3 app的ngx-translation问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！