this.httpClientModule.get不是函数

Question

我刚刚第一次在Angular中使用服务，我收到以下错误：

错误TypeError：this.httpClientModule.get不是函数

我的服务文件：

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方法的内容。你需要在构造函数中注入HttpClient

constructor(private http: HttpClient) {}     

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

还可以在HttpClientModule中导入app.module.ts

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