Angular2 rc5：没有 Http 的提供者

Question

我正在尝试将 angular 2 应用程序移植到 RC5，但我遇到了一个问题：我无法通过模块正确设置应用程序。

有一个名为 CustomersService 的服务可以通过 Http 检索客户数据。我创建了一个导入 HttpModule 并提供 CustomersService 的应用程序模块。在另一个名为 HomeModule 的模块中，有一个组件使用该服务。当应用程序启动时，我在控制台上看到以下错误：

EXCEPTION: Error in ./HomeComponent class HomeComponent_Host - inline template:0:0
ORIGINAL EXCEPTION: No provider for Http!

我不知道为什么会这样...

如有任何建议，我们将不胜感激。

谢谢。

文件如下：

app.module.ts

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

import { MdSidenavModule } from '@angular2-material/sidenav';
import { MdListModule } from '@angular2-material/list';
import { MdIconModule } from '@angular2-material/icon';
import { MdToolbarModule } from '@angular2-material/toolbar';
import { MdButtonModule } from '@angular2-material/button';

import { AppComponent } from './app.component';
import { routing } from './app.routing';
import { CustomersService } from './shared/rest_services/customers.service';

import { HomeModule } from './home/home.module';

@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        HttpModule,

        // material design
        MdSidenavModule,
        MdListModule,
        MdIconModule,
        MdToolbarModule,
        MdButtonModule,

        routing,
        // SharedModule.foorRoot(),
        HomeModule
    ],
    providers: [
        CustomersService, Http
    ],
    bootstrap: [AppComponent]
})
export class AppModule {

}

app.component.ts

import { Component } from '@angular/core';
import { CustomersService } from './shared/rest_services/customers.service';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  views = [ {title: 'Home', icon: 'home', path: 'home' } ];

  constructor() {

  }
}

customers.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/Http';

@Injectable()
export class CustomersService {

  private static _base = 'http://...';

  constructor(private _http: Http) {

  }

  getAll() {
    return this._http.get(CustomersService._base + "/customers.json");
  }
}

home.module.ts

import { NgModule } from '@angular/core';

import { routing }       from './home.routing';
import { HomeComponent } from './home.component';

@NgModule({
    imports: [ routing ],
    declarations: [
        HomeComponent
    ],
    exports: [
        HomeComponent
    ]
})
export class HomeModule {

}

home.component.ts

import { Component, OnInit } from '@angular/core';
import { CustomersService } from '../shared/rest_services/customers.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.component.html',
  styleUrls: ['home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor(private _customers: CustomersService) {
    this._customers.getAll().subscribe((data) => {
      console.log(data);
    });
  }

  ngOnInit() {
  }

}

Answer 1

我认为您不需要在模块的 providers 属性中指定有关 Http 的内容。这是在 imports 属性中包含 HttpModule 时完成的。

@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        HttpModule,

        // material design
        MdSidenavModule,
        MdListModule,
        MdIconModule,
        MdToolbarModule,
        MdButtonModule,

        routing,
        // SharedModule.foorRoot(),
        HomeModule
    ],
    providers: [
        CustomersService // <-----
    ],
    bootstrap: [AppComponent]
})
export class AppModule {

}

HttpModule 为 HTTP 配置相关的提供程序。参见 https://github.com/angular/angular/blob/master/modules/%40angular/http/http.ts#L354

否则，可能是打错了：

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

而不是

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

Answer 2

导入http，然后声明具有Http类型参数的构造函数，如下图

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

@Component({......})
export class CompName
{
   ......
constructor(private http: Http)
{
   ....
}

   .....
}

Angular2 rc5：没有 Http 的提供者

Angular2 rc5: No provider for Http

angular2-http

angular