javascript - this.httpClientModule.get 不是函数

Question

我只是第一次尝试使用 Angular 中的服务，我收到以下错误:

ERROR TypeError: this.httpClientModule.get is not a function

我的服务文件:

import { Injectable } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

@Injectable()
export class AlertsService {
    constructor(
        private httpClientModule: HttpClientModule
    ) {
        //
    }

    getAlerts() {
        console.warn(this.httpClientModule.get('api-data/alerts-data.json'));
    }
}

组件文件:

import { Component, OnInit, } from '@angular/core';
import { AlertsService } from '../alerts.service'

@Component({
    selector: 'at-alerts',
    templateUrl: './alerts.component.html',
    styleUrls: ['./alerts.component.scss'],
    providers: [AlertsService]
})

export class AlertsComponentEdit implements OnInit {
    constructor(
        private alertsService: AlertsService
    ) {
        //
    }

    ngOnInit() {
        this.alertsService.getAlerts();
    }
}

模拟数据文件(alerts-data.json):

[{
  "id": 1,
  "name": "Louis",
  "gender": "male"
}, {
  "id": 2,
  "name": "Jenna",
  "gender": "female"
}, {
  "id": 3,
  "name": "Tom",
  "gender": "male"
}];

据我所知，get 以及 post 等其他方法应该存在于 httpClientModule 中，知道如何解决此错误吗？

Answer 1

httpClientModule 中没有名为 get 的方法。您需要在构造函数中注入(inject) HttpClient

constructor(private http: HttpClient) {}     

getAlerts() {
    console.warn(this.http.get('api-data/alerts-data.json'));
}

同时在您的 app.module.ts

中导入 HttpClientModule

import { HttpClientModule } from '@angular/common/http';

所以你的 app.module 看起来像，

import { NgModule } from '@angular/core';
import {HttpClientModule} from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule
  ],
  declarations: [
  ],
  exports: [
  ]
})
export class CoreModule { }