http - http请求调用方法的难点

Question

当我尝试发出 HTTP 请求时出现错误消息:“无法读取未定义的属性‘get’”

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



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

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 {
}

问题可能是 'HttpClient' 必须来自构造函数......在这种情况下如何使用参数实例化 'DashboardPage' 中的 'http' 对象？

谢谢你的帮助

Answer 1

首先声明我不是 Ionic 开发人员，因此很可能存在我不知道的该环境所需的特定内容，我只能说说您代码的 Angular 部分。

鉴于此，我必须根据您在上面的问题中发布的内容做出假设，无论它看起来如何，实际上您发布了来自 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 一无所知，只需依靠注入(inject)的服务来处理这些细节。它现在看起来像这样:

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