我想实现多语言功能。我遵循了https://ionicframework.com/docs/developer-resources/ng2-translate/。但是我得到Object(...)不是TranslateService.get错误的函数
我已经在Google搜索此错误,但是没有运气。我遵循了这个https://codesundar.com/lesson/ionic-multi-language-support-i18n/
这是代码
app.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { SplashScreen } from '@ionic-native/splash-screen'; import { StatusBar } from '@ionic-native/status-bar'; import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; import { HttpClientModule, HttpClient } from '@angular/common/http'; // If I use this I get error !! Argument of type 'Http' is not assignable to parameter of type 'HttpClient'. Property 'handler' is missing in type 'Http'. // import { HttpModule, Http } from '@angular/http'; export function createTranslateLoader(http: HttpClient) { return new TranslateHttpLoader(http, './assets/i18n/', '.json'); } @NgModule({ declarations: [ MyApp, HomePage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp), HttpClientModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: createTranslateLoader, deps: [HttpClient] } }) ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage ], providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler} ] }) export class AppModule {}
home.ts
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { lang:any; constructor(public navCtrl: NavController, public translate: TranslateService) { this.lang = 'en'; this.translate.setDefaultLang('en'); this.translate.use('en'); } switchLanguage() { this.translate.use(this.lang); }
}
home.html
Ionic Blank Language English Tamizh (?????) {{ 'APPLE' | translate }}
{{ 'BALL' | translate }}
{{ 'CAT' | translate }}
Package.json
{ "name": "ionLang", "version": "0.0.1", "author": "Ionic Framework", "homepage": "http://ionicframework.com/", "private": true, "scripts": { "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "lint": "ionic-app-scripts lint", "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve" }, "dependencies": { "@angular/animations": "5.2.10", "@angular/common": "5.2.10", "@angular/compiler": "5.2.10", "@angular/compiler-cli": "5.2.10", "@angular/core": "5.2.10", "@angular/forms": "5.2.10", "@angular/http": "5.2.10", "@angular/platform-browser": "5.2.10", "@angular/platform-browser-dynamic": "5.2.10", "@ionic-native/core": "4.7.0", "@ionic-native/splash-screen": "4.7.0", "@ionic-native/status-bar": "4.7.0", "@ionic/storage": "2.1.3", "@ngx-translate/core": "^10.0.1", "@ngx-translate/http-loader": "^3.0.1", "ionic-angular": "3.9.2", "ionicons": "3.0.0", "rxjs": "5.5.10", "sw-toolbox": "3.6.0", "zone.js": "0.8.26" }, "devDependencies": { "@ionic/app-scripts": "3.1.9", "typescript": "~2.6.2" }, "description": "An Ionic project" }
错误
请帮忙。谢谢
该错误是因为您使用的Angular v5与最新的ngx-translate版本10(与angular v5不兼容)一起使用。对于将ngx-translate与angular v5一起使用,您需要使用ngx-translate 9.x版本,错误将消失。您可以在@ ngx-translate / core GitHub存储库中找到此文件,他们在其中明确提到了Object(...)的原因不是函数错误。
删除最新的ngx-translate并安装其旧版本。
使用命令npm删除@ ngx-translate / core(10.0.1)
然后通过命令npm install @ ngx-translate / core @ 9.1.1 --save安装9.ng版本的@ ngx-translate / core。