如何修复“this.http.get 不是函数”错误？

Question

我一直在尝试在 Ionic 中创建一个语言本地化应用程序。这个想法是在 app.component 中设置翻译服务（使其在整个应用程序中可用），然后在选项卡中使用它（例如：tab2.html）。

我收到如下错误：

 TypeError: this.http.get is not a function
at TranslateHttpLoader.push../node_modules/@ngx-translate/http-loader/fesm5/ngx-translate-http-loader.js.TranslateHttpLoader.getTranslation (ngx-translate-http-loader.js:27)
at TranslateService.push../node_modules/@ngx-translate/core/fesm5/ngx-translate-core.js.TranslateService.getTranslation (ngx-translate-core.js:738)
at TranslateService.push../node_modules/@ngx-translate/core/fesm5/ngx-translate-core.js.TranslateService.retrieveTranslations (ngx-translate-core.js:713)
at TranslateService.push../node_modules/@ngx-translate/core/fesm5/ngx-translate-core.js.TranslateService.setDefaultLang (ngx-translate-core.js:629)
at new AppComponent (app.component.ts:18)
at createClass (core.js:22062)
at createDirectiveInstance (core.js:21931)
at createViewNodes (core.js:23157)
at createRootView (core.js:23071)
at callWithDebugContext (core.js:24079)   

离子信息如下：

离子（离子 CLI）：4.9.0

离子框架：@ionic/angular 4.0.0

@angular-devkit/build-angular : 0.12.3

@angular-devkit/schematics : 7.2.3

@angular/cli：7.2.3

@ionic/angular-toolkit : 1.2.3

系统：

NodeJS : v10.15.0 (C:\Program Files\nodejs\node.exe)

npm：6.4.1

操作系统：Windows 10

代码文件如下。

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}



@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
 BrowserModule, 
 IonicModule.forRoot(), 
 AppRoutingModule,
 HttpClientModule,
 TranslateModule.forRoot({
  loader: {
    provide:  TranslateLoader,
    useFactory: HttpLoaderFactory,
    deps: [HttpClient]
   }
 })
],
providers: [
  StatusBar,
  SplashScreen,
  { provide: RouteReuseStrategy, useClass: IonicRouteStrategy}
],
bootstrap: [AppComponent]
 })
  export class AppModule {}

app.component.ts

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { TranslateService } from '@ngx-translate/core';
 @Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
  })
  export class AppComponent {
  constructor(
    private translate: TranslateService,
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar
  ) {
    translate.setDefaultLang('en');
    this.initializeApp();
  }

    switchLanguage(language: string) {
    this.translate.use(language);
  }

  initializeApp() {
  this.platform.ready().then(() => {
  this.statusBar.styleDefault();
  this.splashScreen.hide();
     });
   } 
 }

tab2.module.ts

import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Tab2Page } from './tab2.page';
import { AppComponent } from './../app.component'
import { TranslateModule } from '@ngx-translate/core';

@NgModule({
   imports: [
   IonicModule,
   CommonModule,
   FormsModule,
   RouterModule.forChild([{ path: '', component: Tab2Page }]),
   TranslateModule.forChild()
   ],
   declarations: [Tab2Page]
  })
  export class Tab2PageModule {}

tab2.page.html

<ion-header>
<ion-toolbar>
<ion-title>
  Tab Two
</ion-title>

<ion-content>
    <h1 translate> Title </h1>

<div>
  {{ 'Intro' | translate:user }}
</div>

<button (click)="switchLanguage('en')">en</button>

<button (click)="switchLanguage('hn')">hn</button>
</ion-content>

en.json

{
"Title": "Translation example",
"Intro": "Hello I am Arthur, I am 42 years old."
 }  

预期的结果是 tab2 的浏览器页面应该有文本和 2 个用于语言选择的按钮。单击时，文本应按预期更改。我是第一次使用 Ionic 和 Angular，但对语法或一般流程的工作方式没有很好的掌握。如果代码有多个错误，请告诉我。任何帮助，将不胜感激！

Answer 1

如果您需要从多个位置访问某个功能，请考虑将其放入服务中。 我无法使用您的代码复制您提到的问题。但是，考虑到您的要求，我创建了一个示例应用程序。你可以关注这里

https://stackblitz.com/edit/internationalization-example

下面的解释

我创建了一个服务

event-provider.service

import { EventEmitter } from '@angular/core';
export class EventProvider {
// Use currentLang to subscribe to the change event
public currentLang: EventEmitter<string> = new EventEmitter();

 //Call this method from other components or pages to Change the language
 setLang(val) {
  this.currentLang.emit(val);
 }
}

我在两个地方使用创建的服务，

tab2.page.ts

export class Tab2Page implements OnInit {

  constructor(private translate: TranslateService,private 
    eventProvider:EventProvider) { }

  ngOnInit() {
  }

  switchLanguage(language: string) {
    this.eventProvider.setLang(language);
  }
}

app.component.ts

   //Subscribe to language change in app component
   this.eventProvider.currentLang.subscribe(lang => {
     this.translate.use(lang);
   });

希望这会有所帮助。