在服务中注入http会给出"没有Http的提供者!" 错误

Question

Angular版本:2.0.0-beta.13

我想注入http一项服务:

@Injectable()
export class GithubService {
    ...
    constructor(private http: Http) {
    }
}

我已HTTP_PROVIDERS在应用程序的根组件中列为提供程序,因此该提供程序应该可用于我的应用程序中的任何组件:

@Component({
  providers: [HTTP_PROVIDERS],
})
export class AppComponent {}

但是,当我运行此应用程序时,我收到以下错误:

例外:错误:未捕获(承诺):没有Http的提供者!(HttpReqComponent - > GithubService - > Http)

我究竟做错了什么？

编辑

我改变providers了viewProviders,错误现在消失了!

@Component({
  viewProviders: [HTTP_PROVIDERS],
})
export class AppComponent {}

但是,我无法解释为什么这是有效的.http任何视图都不会直接访问.它只能在里面进入GithubService.那我为什么要宣布HTTP_PROVIDERS为viewProvider？

编辑2

好吧,我将providersAppComponent 的声明向下移动到我需要它的组件,现在它可以工作了!因此,在根级别声明它必定有一些怪癖.

@Component({
    providers: [HTTP_PROVIDERS, GithubService],
})
export class HttpReqComponent { }

其实,无论是providers和viewProviders作品.事实证明,这viewProviders实际上更具限制性,并提供更好的组件封装.有关详细信息,请参阅此文

Answer 1

点击此链接

Angular2/HTTP异常没有ConnectionBackend @abreneliere的答案是正确的我与角2快速启动工作(而https://angular.io/guide/quickstart)和我正在试图将服务添加到组件.

答案:文件:app.module.ts代码:

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

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

Answer 2

它的好,如果你去Providers:[HTTP_PROVIDERS],但其良好的refernce HTTP_PROVIDERS成bootstrap().你不需要使用viewProvider,它是出于其他目的.

你必须确保http.dev.js已经包含(通过CDN/node_modules).

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.13/http.dev.js"></script> 

然后在rootComponent中

import {HTTP_PROVIDERS} from 'angular2/http';
import {GithubService} from './GithubService';

bootstrap(rootComponent,[HTTP_PROVIDERS,GithubService]);

// if you reference HTTP_PROVIDERS here globally (in bootstrap), you don't require to use providers:[HTTP_PROVIDERS] in any component. 
// same way GithubService reference has been passed globally which would create single instance of GithubService (In case if you want)

然后在GithubService中

import {Http} from 'angular2/http';

@Injectable()
export class GithubService {
    ...
    constructor(private http: Http) {  // this will work now without any error
    }
}

Answer 3

截至2.0.0-rc.5目前为止:

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


@NgModule({
  imports: [
    HttpModule
  ]}

https://angular.io/docs/ts/latest/guide/server-communication.html