Как исправить ошибку «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

Ионная структура: @ ионная / угловая 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>

ru.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);
  }
}

приложение.component.ts

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

Надеюсь, это поможет.