在Angular2服务中创建Http可注入对象？

Question

我正在尝试将http包装在服务中，以便所有数据库访问都通过我的频道

问题是，服务不能将可注入对象传递给其构造函数（对吗？），因此我必须自己构造所有对象。 我正在使用代码：

import {Http,HTTP_BINDINGS,XHRBackend,BaseRequestOptions} from 'http/http';
import {Injector,bind} from 'angular2/di'

...

var injector = Injector.resolveAndCreate([
              BaseRequestOptions,
              XHRBackend,
              bind(Http).toFactory(
                  function(backend, defaultOptions) {
                    return new Http(backend, defaultOptions);
                  },
                  [XHRBackend, BaseRequestOptions])
            ]);

this.http = injector.get(Http);

但是当尝试通过以下方式使用它时：

this.http.get('./entities.json')
  //Get the RxJS Subject
  .toRx()
  // Call map on the response observable to get the parsed people object
  .map(res => res.json())
  .subscribe(e => this.entities = e);

我收到一个错误：

实例化DBDriver时出错！ （实体-> DBDriver）。 angular2.dev.js：22367原来的例外：没有提供函数（）{}！ （函数（_backend，_defaultOptions）{->函数（_browserXHR，_baseResponseOptions）{->函数（）{}）

Answer 1

确保将HTTP注入服务中
注意de Inservice构造函数中的@Inject（http）

@Inject(Http) public http: Http

请注意，http（至少在angular2 alpha45处）在angular lib之外，因此您必须手动添加http lib

<script src="/node_modules/angular2/bundles/angular2.min.js"></script>
<script src="/node_modules/angular2/bundles/http.min.js"></script>

服务

import {Http, Headers, HTTP_BINDINGS} from 'angular2/http';
import {Inject} from 'angular2/angular2'

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

getQuote(): Promise<any> {
        return new Promise((resolve, reject) => {
            this.http.get('http://localhost:3001/api/random-quote')
            .map(res => res.text())
            .subscribe(
                data => resolve(data),
                err => this.logError(err),
                () => console.log("Random Quote Complete")
            );
        }) 
    }

零件

import {Component, bootstrap, CORE_DIRECTIVES} from 'angular2/angular2';
import {Http, Headers, HTTP_BINDINGS} from 'angular2/http';
import {ChuckService} from "./chuck-service";

@Component({
    selector: 'hello-app',
template: `
    {{quoteOfTheDay}}<br />
    <button (click) = "getQuote()">Get new quote</button><br /><br />
    `,
    directives: [CORE_DIRECTIVES],
    providers: [ChuckService, HTTP_BINDINGS]
})

export class HelloApp {
    quoteOfTheDay: string = '';

    constructor(public _chuckService: ChuckService) {
    }

    getQuote(){
        this._chuckService.getQuote().then((resp) => this.quoteOfTheDay = resp);
    }
}

bootstrap(HelloApp);

INDEX.HTML

<script src="/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="/node_modules/systemjs/dist/system-csp-production.js"></script>