我是离子3和Angular 4的新手。我正在尝试翻译页面 但是当我运行应用程序时,我收到此错误。我添加了库并导入了所有内容,如文档所述,我在app模块的providers数组中添加了translate服务,但我仍然收到此错误
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import {HttpClientModule, HttpClient} from '@angular/common/http';
import { MyApp } from './app.component';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import {TranslateModule, TranslateLoader, TranslateService} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}
@NgModule({
declarations: [
MyApp
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
TranslateService
]
})
export class AppModule {}
app.components.ts
import { Component, ViewChild,Inject, Injectable} from '@angular/core';
import { Nav, Platform} from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import {TranslateService} from '@ngx-translate/core';
@Injectable()
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild("myNav") nav: Nav;
rootPage: any;
pages: Array<{title: string, component: any, icon: string}>;
constructor(public platform: Platform,
public statusBar: StatusBar,
public splashScreen: SplashScreen ,
public translate: TranslateService) {
// this language will be used as a fallback when a translation isn't
// found in the current language
translate.setDefaultLang('en');
translate.use('en');
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();
});
}
switchLanguage(language: string){
this.translate.use(language);
}
}
home.ts
import { Component } from '@angular/core';
import { NavController, NavParams, Platform } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage{
constructor(public navCtrl: NavController,
private platform: Platform,
private navParams: NavParams){}
}
home.module.ts
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage} from './home';
@NgModule({
declarations: [
HomePage
],
imports: [
IonicPageModule.forChild(HomePage)
],
})
export class HomePageModule {}
我还在“assets / i18n /”中添加了文件夹和2个json文件 请帮忙!!
答案 0 :(得分:3)
对于角度版本&lt; 4.3需要安装此版本 http-loader@0.1.0 的http-loader
1)npm install @ngx-translate/http-loader@0.1.0 --save
2)npm install @ngx-translate/core --save
3)从@ angular / http
导入HttpModule和Http4)从@ ngx-translate / core导入TranslateModule,TranslateLoader,TranslateService
5)从@ ngx-translate / http-loader
导入TranslateHttpLoader6)使用参数Http
在 app.module.ts 中导出功能export function HttpLoaderFactory(http: Http) {
return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}
这是解决函数参数问题的原因,因为我使用的是最新版本的http-loader,我称之为httpClientModule&amp; HttpClient,它与角度旧版本不兼容。
7)调用服务的构造函数中的最后但不是最少的初始化对象 TranslateService
public constructor(public translate: TranslateService){
}
8)最后你可以使用这个在构造函数中初始化它的对象 查看(html页面)像这样:
{{'HOME.HELLO' | translate }}
注意:在json文件中,字符串(键和值)必须全部大写。