Позвольте мне начать с того, что я не являюсь разработчиком Ionic, поэтому вполне может потребоваться что-то конкретное для той среды, о которой я не знаю, я могу говорить только с угловой частью вашего кода.
Учитываячто из того, что вы разместили в своем вопросе выше, я должен исходить из того, что, несмотря на то, как это выглядит, на самом деле вы разместили код из 3 различных файлов.Я предполагаю, что файл # 1 является компонентом, вероятно, имеет имя, подобное dashboard.component.ts, и выглядит как первая часть того, что вы опубликовали:
import {Component} from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {Observable} from 'rxjs/Observable';
import {HttpClient} from "@angular/common/http";
import {ContactGdzPage} from "../contact-gdz/contact-gdz";
import {ListeServicePage} from "../liste-service/liste-service";
import {ApiGdz} from "../../services/apiGdz.service";
@IonicPage()
@Component({
selector: 'page-dashboard',
templateUrl: 'dashboard.html',
})
export class DashboardPage {
constructor(private apiGdz: ApiGdz, public http: HttpClient) {
this.apiGdz.callApi().then(
(data) => {
console.log('ok', data);
},
(error) => {
console.log('!ok', error);
}
);
}
}
Затем существует отдельный служебный файл (который выглядит какимпортируется в компонент выше), называется apiGdz.service.ts и выглядит следующим образом:
import {HttpClient} from "@angular/common/http";
export class ApiGdz {
public http: HttpClient;
constructor() {}
callApi() {
return new Promise(
(resolve, reject) => {
this.http.get('https://swapi.co/api/films').subscribe(
(data) => {
resolve(data);
},
(error) => {
reject(error);
}
);
}
);
}
}
И, наконец, вы также включили файл базового модуля, который, вероятно, называется чем-то вроде 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 {AuthService} from "../services/auth.service";
import {DashboardPage} from "../pages/dashboard/dashboard";
import {ConnectionPage} from "../pages/connection/connection";
import {HelpPage} from "../pages/help/help";
import {ContactGdzPage} from "../pages/contact-gdz/contact-gdz";
import {ListeServicePage} from "../pages/liste-service/liste-service";
import {ApiGdz} from "../services/apiGdz.service";
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
MyApp,
HomePage,
DashboardPage,
ConnectionPage,
HelpPage,
ContactGdzPage,
ListeServicePage,
],
imports: [
BrowserModule,
HttpClientModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
DashboardPage,
ConnectionPage,
HelpPage,
ContactGdzPage,
ListeServicePage,
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
AuthService,
ApiGdz,
]
})
export class AppModule {
}
Если все правильно, я бы предложил незначительное изменение как компонента, так и службы.
Сначала служба.Одним из преимуществ использования сервисов в Angular является то, что они могут скрывать детали от компонента, такие как факт получения реальных данных с внутреннего сервера через http.Поэтому ваш сервис будет выглядеть примерно так:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({ providedIn: 'root' })
export class ApiGdz {
constructor(private http: HttpClient) {}
callApi() {
return new Promise(
(resolve, reject) => {
this.http.get('https://swapi.co/api/films').subscribe(
(data) => {
resolve(data);
},
(error) => {
reject(error);
}
);
}
);
}
}
Теперь ваш компонент может быть изменен, чтобы ничего не знать о http, просто положитесь на внедренный сервис для обработки этих деталей.Теперь это будет выглядеть примерно так:
import {Component} from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {Observable} from 'rxjs/Observable';
// import {HttpClient} from "@angular/common/http"; // <-- DELETE THIS LINE
import {ContactGdzPage} from "../contact-gdz/contact-gdz";
import {ListeServicePage} from "../liste-service/liste-service";
import {ApiGdz} from "../../services/apiGdz.service";
@IonicPage()
@Component({
selector: 'page-dashboard',
templateUrl: 'dashboard.html',
})
export class DashboardPage {
constructor(private apiGdz: ApiGdz) {
this.apiGdz.callApi().then(
(data) => {
console.log('ok', data);
},
(error) => {
console.log('!ok', error);
}
);
}
}