Dependency injection 在Angular2服务中创建可注入的Http？

我试图将http封装在服务中，以便所有db访问都通过我的通道

问题是，服务不能将可注入项传递给它们的构造函数（对吗？），所以我必须自己构造它。我正在使用代码：

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实例化期间出错！（实体->数据库驱动程序）。 angular2.dev.js:22367原始异常：函数（）没有提供程序{}！（函数（_backend，_defaultOptions）{->function（_browserXHR，_baseResponseOptions）{->function（）{}）

---

确保将HTTP注入到您的服务中
注意@Inject（http）在de-service构造函数中

@Inject(Http) public http: Http

请注意，http（至少是angular2 alpha45）位于angular库之外，因此您必须手动添加http库

<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{Http，Headers，Http_BINDINGS}来自'angular2/Http'；
从'angular2/angular2'导入{Inject}
构造函数（@Inject（Http）public Http:Http）{}
getQuote（）：承诺{
返回新承诺（（解决、拒绝）=>{
this.http.get（'http://localhost:3001/api/random-引号'）
.map（res=>res.text（））
.订阅(
数据=>解析（数据），
err=>this.logError（err），
（）=>console.log（“随机报价完成”）
);
}) 
}

组成部分

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);

从'angular2/angular2'导入{组件、引导、核心指令}；
从'angular2/Http'导入{Http，头，Http_绑定}；
从“/chuck service”导入{chuck service}；
@组成部分({
选择器：“你好应用程序”，
模板：`
{{quoteOfTheDay}}

获取新报价


`,
指令：[核心指令]，
提供者：[服务，HTTP_绑定]
})
出口类HelloApp{
quoteOfTheDay:字符串=“”；
建造商（公共服务：chuckService）{
}
getQuote（）{
这个.u chuckService.getQuote（）。然后（（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>

---

阅读本文，谢谢@EricMartinez这看起来不错。也可以通过var injector=injector.resolveAndCreate（[HTTP_BINDINGS]）；this.HTTP=injector.get（HTTP）解决；