ionic 3 应用程序的 ngx 翻译问题 [英] ngx-translation issue with ionic 3 app
本文介绍了ionic 3 应用程序的 ngx 翻译问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
使用 ionic 3 应用程序的 ngx 翻译对我不起作用.以下是我的代码:
<块引用>app.module.ts
import { BrowserModule } from '@angular/platform-browser';从'@angular/core'导入{ErrorHandler，NgModule}；从 'ionic-angular' 导入 { IonicApp, IonicErrorHandler, IonicModule }；从 '@angular/http' 导入 { HttpModule,Http }；从@ionic/storage"导入 { IonicStorageModule }；从'@ngx-translate/core'导入{ TranslateModule, TranslateLoader }；从'@ngx-translate/http-loader'导入{ TranslateHttpLoader }；从'./app.component'导入{MyApp}；从'@ionic-native/status-bar'导入{状态栏}；从@ionic-native/splash-screen"导入 { SplashScreen }；导出函数 createTranslateLoader(http: Http) {返回新的 TranslateHttpLoader(http, './assets/i18n/', '.json');}@NgModule({声明:[我的应用],进口:[浏览器模块，Http模块，IonicStorageModule.forRoot(),TranslateModule.forRoot({装载机:{提供:TranslateLoader，useFactory: (createTranslateLoader),部门:[Http]}}),IonicModule.forRoot(MyApp),],引导程序:[IonicApp]，入口组件:[我的应用],提供者:[状态栏，闪屏，{提供:ErrorHandler，useClass:IonicErrorHandler}，]})导出类 AppModule {}<块引用>
app.component.ts
import { Component, ViewChild } from '@angular/core';从离子角度"导入{导航，平台}；从'@ionic-native/status-bar'导入{状态栏}；从@ionic-native/splash-screen"导入 { SplashScreen }；从'@ionic/storage'导入{存储}；从'@ngx-translate/core'导入{ TranslateService }；@零件({模板网址:'app.html'})导出类 MyApp {@ViewChild(Nav) 导航:导航；公共根页面:任何；构造函数(公共平台:平台，公共状态栏:状态栏，公共闪屏:闪屏，公共存储:存储，公共翻译:翻译服务){this.storage.get('AppLangcode').then((AppLangcode) => {如果(AppLangcode==null){translate.setDefaultLang('en');}别的{translate.setDefaultLang(AppLangcode);}})}初始化应用程序(){this.platform.ready().then(() => {this.statusBar.styleDefault();this.splashScreen.hide();this.menu.swipeEnable(false);});}}在上面的文件中，我正在检查本地数据库中的存储首选项，然后在加载应用程序时将其设置为默认语言.
<块引用>我的 RootPage home.module.ts
import { NgModule } from '@angular/core';从离子角"导入{ IonicPageModule }；从'./home'导入{主页}；从'@ngx-translate/core'导入{ TranslateModule }；@NgModule({声明:[主页，],进口:[IonicPageModule.forChild(主页)，TranslateModule.forChild()],出口:[主页]})导出类 HomePageModule {}<块引用>
home.ts
从'@angular/core'导入{组件}；导入 { IonicPage, NavController, NavParams } from 'ionic-angular';从'@ionic/storage'导入{存储}；从'@ngx-translate/core'导入{ TranslateService }；@IonicPage()@零件({选择器:'page-home'，模板网址:'home.html'})导出类主页 {构造函数(公共 navCtrl:NavController，公共导航参数:导航参数，公共存储:存储，公共翻译:翻译服务，){}ionViewDidLoad() {//console.log('ionViewDidLoad HomePagePage');}}<块引用>
home.html
<ion-header><ion-navbar color='navbarColor'><按钮离子按钮菜单切换><ion-icon name="menu"></ion-icon></按钮><ion-title><img src="assets/icon/logo.png" alt="Ionic logo"></ion-title></离子导航栏></离子头><ion-content class="grid-basic-page"><离子网格><离子行><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-col(click)="openPage('ServicesPage');"><div><img src="assets/icon/icon-mechanic.png">{{"service_request" |翻译}}</div></ion-col><离子色谱><button [disabled]="!clickhandle" (click)="emergencyCall();"><img src="assets/icon/icon-emergency.png">{{"emergency_helpline" |翻译}}</按钮></ion-col></离子行></离子网格></离子含量><块引用>
侧边菜单页面语言.ts
从'@angular/core'导入{组件}；从 'ionic-angular' 导入 { IonicPage, NavController, NavParams,Events }；从 '@angular/forms' 导入 { NgForm,FormBuilder, FormGroup, Validators }；从'@ngx-translate/core'导入{ TranslateService }；从'@ionic/storage'导入{存储}；@IonicPage()@零件({选择器:'页面语言'，templateUrl: 'language.html',})导出类 LanguagePage {公共语言:FormGroup；公共 langcod:字符串；构造函数(公共 navCtrl:NavController，公共导航参数:导航参数，公共表单构建器:表单构建器，公共翻译:TranslateService，公共存储:存储){this.storage.get('AppLangcode').then((AppLangcode) => {如果(AppLangcode==null){this.langcod = 'en';this.langform.get('langcode').setValue(this.langcod);}别的{this.langcod = AppLangcode;this.langform.get('langcode').setValue(this.langcod);}})this.langform = formBuilder.group({语言代码:[this.langcod，Validators.required]});}语言选择(形式:NgForm){让 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';从离子角"导入{ IonicPageModule }；从'./language'导入{LanguagePage}；从'@ngx-translate/core'导入{ TranslateModule }；@NgModule({声明:[语言页面，],进口:[IonicPageModule.forChild(LanguagePage),TranslateModule.forChild()],出口:[语言页面]})导出类 LanguagePageModule {}<块引用>
语言.html
<ion-header><ion-navbar color='navbarColor'><按钮离子按钮菜单切换><ion-icon name="menu"></ion-icon></按钮><ion-title><img src="assets/icon/logo.png" alt="Ionic logo"></ion-title></离子导航栏></离子头><离子含量填充><form [formGroup]="langform" (submit)="langselect($event)"><ion-list radio-group formControlName="langcode"><离子行响应式sm><ion-col col-6><离子项目><离子标签>{{"英文" |翻译}}</离子标签><ion-radio value="en" 勾选></ion-radio></离子项目><离子项目><离子标签>{{"印地语" |翻译}}</离子标签><ion-radio value="hi"></ion-radio></离子项目></ion-col></离子行></离子列表><离子行响应式sm><离子色谱><button ion-button block type="submit" [disabled]="!langform.valid">提交</按钮></ion-col></离子行></表格></离子含量><块引用>
en.json
<代码>{"英语" : "英语",印地语":हिंदी"，"quick_book_pay":"快速预订和支付","refil_history":"补充历史记录","service_request":"服务请求","emergency_helpline":"紧急求助热线"}<块引用>
hi.json
<代码>{"英语" : "英语",印地语":हिंदी"，"quick_book_pay":"त्वरित बुक और भुगतान करें","refil_history":"रीफिल इतिहास","service_request":"सेवा अनुरोध",emergency_helpline":आपातकालीनहेल्पलाइन"}在更改语言时，它会显示 keys 而不是翻译.请让我知道我做错了什么?
解决方案
我已经更新了我的语言模块，这对我有用，不确定这是否正确，但它有效.
import { NgModule } from '@angular/core';从离子角"导入{ IonicPageModule }；从'./language'导入{LanguagePage}；从'@ngx-translate/core'导入{ TranslateModule, TranslateLoader }；从'@ngx-translate/http-loader'导入{ TranslateHttpLoader }；从 '@angular/http' 导入 { HttpModule,Http }；导出函数 createTranslateLoader(http: Http) {返回新的 TranslateHttpLoader(http, './assets/i18n/', '.json');}@NgModule({声明:[语言页面，],进口:[IonicPageModule.forChild(LanguagePage),TranslateModule.forChild({装载机:{提供:TranslateLoader，useFactory: (createTranslateLoader),部门:[Http]}})],出口:[语言页面]})导出类 LanguagePageModule {}我添加了子加载器并在 language.module.ts
中导出 TranslateHttpLoader<块引用>语言.ts
langselect(form: NgForm){让 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);
}
这篇关于ionic 3 应用程序的 ngx 翻译问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
