没有Http的提供者！ - Angular 4 + Rails 5 API

Question

我已经按照本教程进行操作 ，但是很难实现。

我正在使用Angular 4.2.4。

[Error] ERROR
Error: No provider for Http!
injectionError — core.es5.js:1169
...
  View_AppComponent_Host_0 (AppComponent_Host.ngfactory.js:4)
  ...

据我所知，自从编写本教程以来，Angular已经改变了一些内容，包括替换它：

import { Http } from '@angular/http';

有了这个：

import { HttpModule } from '@angular/http';

我试过这个并将HttpModule添加到`app.module.ts中的imports数组中。

app.component.ts

import { Component } from '@angular/core';
import { HttpModule } from '@angular/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'app';
  books;

  constructor(private http: Http) {
    http.get('http://localhost:3000/books.json')
      .subscribe(res => this.books = res.json());
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

任何建议将不胜感激。

谢谢！

Answer 1

您应该从AppComponent @angular/http导入Http提供程序，并将HttpModule添加到AppModule的imports数组中：

AppComponent

import { Component } from '@angular/core';
import { Http } from '@angular/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'app';
  books;

  constructor(private http: Http) {
    http.get('http://localhost:3000/books.json')
      .subscribe(res => this.books = res.json());
  }
}

的AppModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppModule,
    HttpModule 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }