Angular 角度2-Http提供程序错误

我刚从Angular 2开始，我正在尝试获取一个http请求

代码如下

import { Component, View, bootstrap } from 'angular2/angular2';
import { TodoInput } from './todoInput.ts';
import { TodoList } from './todoList.ts';
import { TodoService } from './todoService.ts';
import { HttpService } from './httpService.ts';

@Component({
  selector: 'my-app'
})
@ View({
  directives: [TodoInput, TodoList]
  templateUrl: 'templates/app.html'
})
class AppComponent {
  color: string;
  numbr: number;
  hidden: boolean;

  constructor(public myservice: TodoService, public https: HttpService) {
    this.color = 'blue';
    this.numbr = 5;
    this.hidden = false;
    https.getHttpData();
  }

}
bootstrap(AppComponent, [TodoService, HttpService]);

http服务如下所示：

import { Http, HTTP_PROVIDERS } from 'angular2/http';
import {Injectable} from 'angular2/core'

@Injectable()
export class HttpService {

    private url: string = 'http://www.omdbapi.com/?s=walking';

    data: array[string] = [];   

    logError(error):void {
        console.log(error);
    }

    constructor(public http: Http) {

    }


    public getHttpData() {
        this.http.get(this.url)
            .map(res => res.json())
            .subscribe(
                data => this.data = data,
                err => this.logError(err), 
                () => console.log('Random Quote Complete')
            );
    }
}

当我运行应用程序时，我得到以下错误：

EXCEPTION:没有e的提供者！（AppComponent->HttpService->e）

和

angular2.dev.js:21835错误：DI异常

有什么想法吗？我错过了什么

提前感谢你的帮助

更新 我设法做到了。我希望它是正确的，但它是有效的：

import { Component, View, NgFor, FORM_DIRECTIVES, bootstrap } from 'angular2/angular2';
import { TodoInput } from './todoInput.ts';
import { TodoList } from './todoList.ts';
import { TodoService } from './todoService.ts';
import { HttpService } from './httpService.ts';
import { HTTP_PROVIDERS } from 'angular2/http';

@Component({
  selector: 'my-app'
})
@View({
  directives: [TodoInput, TodoList, NgFor, FORM_DIRECTIVES]
  templateUrl: 'templates/app.html'
})
class AppComponent {
  color: string;
  numbr: number;
  hidden: boolean;
  shows: [string] = [];

  constructor(public myservice: TodoService, public https: HttpService) {
    this.color = 'blue';
    this.numbr = 5;
    this.hidden = false;
  }


  searchShows():void {
    this.https.getHttpData(this.keyword).subscribe(
      data => this.shows = data.Search,
      err => console.log(err),
      () => console.log('done!')
    );
  }
}

bootstrap(AppComponent, [HTTP_PROVIDERS, TodoService, HttpService]);

还有我的服务课：

import { Http } from 'angular2/http';
import { Inject } from 'angular2/core'

export class HttpService {

    private url: string = 'http://www.omdbapi.com/?s=';

    data: [string] = [];    

    logError(error):void {
        console.log(error);
    }

    constructor(@Inject(Http) public http: Http) {
    }


    public getHttpData(keyword) {

        return this.http.get(this.url + keyword)
            .map(res => res.json());
    }
}

---

但是，我不能让它工作，使服务成为唯一使用所有http所需依赖项的类。似乎主类必须引导http_提供者。不知道为什么。

我不使用角度2，但是

• 您确定导入中包含HTTP_提供程序吗？Http还不够
• 在提供的代码中，在“@”和“视图”之间有一个空格：

---

我认为构造函数应该是

构造函数（@Inject（Http）Http:Http）{

仍然得到相同的错误…良好的观察：

HTTP\u提供程序

应该通过组件中的

boostrap

或

PROVIDERS/viewProviders

注入。是的，通过main.ts的

bootstrap

添加

HTTP\u提供程序解决了问题！但是，当通过
PROVIDERS/viewPr>添加它时oviders
在httpService.ts中，它不起作用（空白页，没有错误）。你知道为什么后者不起作用吗？@uglycode你必须使用组件中的那些：
@component（{providers:[HTTP\u providers]}）
不在您的服务范围内class@EricMartinez我不太清楚你的意思。我在引导应用程序时添加了这一点：
bootstrap（AppComponent[HTTP\u PROVIDERS，TodoService，HttpService]）；
并将其包含在类的顶部：
import{HTTP\u PROVIDERS}从“angular2/http”；
开始，它就可以工作了。我不需要将您编写的内容添加到
@组件中。
。我将编辑我的原始帖子并粘贴有效的解决方案，您可以告诉我在哪里（如果）我做错了任何事。Http是不够的，因为Http本身依赖于另一个类。Http_提供程序是一种语法糖，它阻止您导入类的所有依赖项。