Angular 2.0 - Injected Http服务未定义

Question

评论 - 我设法解决了这个问题,请参阅本文的底部

我正在使用UpgradeAdapter(ngUpgrade)升级我的Angular 1.X应用程序.我添加了一个新的Angular 2.0服务,我从我的Angular 2.0组件中调用它:

服务:

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

export default class MyService {
  _http;
  constructor(http: Http) {
    this._http = http; //http is undefined here
  }

  getData(): Observable<any> {
    return this._http.get(someUrl);
  }
}

在我的内心我bootstrap.ts:

declare var angular: any;

import {UpgradeAdapter} from 'angular2/upgrade';
import {Http} from 'angular2/http';

let adapter = new UpgradeAdapter();

adapter.addProvider(Http);

//.....

adapter.bootstrap(document.body, ['myApp']);

我在这做错了什么？

编辑:

我正在向Angular 2.0服务注入另一项服务(Angular 1.X升级服务),它确实有效:

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

export default class MyService {
  _http;
  _dataService;
  constructor( @Inject('dataService') dataService, http: Http) {
    this._http = http; //http is undefined here
    this._dataService = dataService; //dataService is defined!!
  }

  getData(): Observable<any> {
    return this._http.get(someUrl);
  }
}

Bootstrap.ts:

declare var angular: any;

import {UpgradeAdapter} from 'angular2/upgrade';
import {Http} from 'angular2/http';

let adapter = new UpgradeAdapter();

adapter.addProvider(Http);

adapter.upgradeNg1Provider('dataService');

adapter.bootstrap(document.body, ['myApp']);

编辑2:

在查看我的ES5传输代码时,我发现了以下代码:

 MyService = __decorate([
        core_1.Injectable(),
        __param(0, core_1.Inject('dataService'))
    ], MyService);
    return MyService;

正如你所看到的 - 没有http注射MyService.更改我的服务构造函数以使用此语法时

constructor( @Inject('dataService') dataService, @Inject('Http') http)

现在我收到以下错误:

Error: No provider for Http!

解决问题的方法:

所以我终于成功了,使用@PierreDuc回复的线索:

我将MyService的构造函数更改为:

constructor( @Inject('dataService') dataService, @Inject(Http) http)

我HTTP_PROVIDERS作为提供者添加到我的组件(使用该服务):(在我的ng 2组件:)

providers: [MyService, HTTP_PROVIDERS]

不需要@Injectable或addProvider在我的引导程序内.

我不完全理解为什么会发生这种情况以及为什么这个解决方案有效.如果有人在这里知道,我们会很乐意解释它.

解决方案编辑

经过一番阅读,我现在更了解DI了.我可以使用addProvider(HTTP_PROVIDERS)而不是为每个组件定义一个提供程序(它将可用于所有组件).唯一的谜团是为什么注射private http: Http在工作时@Inject(Http) http不起作用.任何的想法？？？

Answer 1

您应该在引导程序中添加HTTP_PROVIDERS，而不仅仅是Http. 尝试这个bootstrap.ts

declare var angular: any;

import {UpgradeAdapter} from 'angular2/upgrade';
import {HTTP_PROVIDERS} from 'angular2/http';

let adapter = new UpgradeAdapter();

adapter.addProvider(HTTP_PROVIDERS);

//.....

adapter.bootstrap(document.body, ['myApp']);

编辑

除此之外，MyService.ts必须有一个@Injectable()装饰器来让 Angular 知道它必须注入其依赖项。注入工作的原因dataService是因为你使用了装饰器@Inject。尝试这个MyService.ts

import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';
import {Observable} from 'rxjs/Observable';

@Injectable()
export default class MyService {

  constructor(private _http: Http) {}

  getData(): Observable<any> {
    return this._http.get(someUrl);
  }
}