在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>