【发布时间】：2018-10-04 08:24:33
【问题描述】：
我想实现多语言功能。我关注了https://ionicframework.com/docs/developer-resources/ng2-translate/。但我得到 Object(...) is not a function at TranslateService.get 错误
我在谷歌上搜索过这个错误，但没有运气。我关注了这个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
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item>
<ion-label>Language</ion-label>
<ion-select [(ngModel)]="lang" (ionChange)="switchLanguage()">
<ion-option value="en">English</ion-option>
<ion-option value="ta">Tamizh (தமிழ்)</ion-option>
</ion-select>
</ion-item>
</ion-list>
<ion-list>
<ion-item>
<h2>{{ 'APPLE' | translate }}</h2>
</ion-item>
<ion-item>
<h2>{{ 'BALL' | translate }}</h2>
</ion-item>
<ion-item>
<h2>{{ 'CAT' | translate }}</h2>
</ion-item>
</ion-list>
</ion-content>
包.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 ionic-framework multilingual