Angular 2.0-注入的Http服务未定义

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

我正在使用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);
  }
}

我做错了什么

编辑：

我正在将另一项服务（Angular 1.X升级服务）注入到Angular 2.0服务中，它确实可以工作：

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

编辑2：

查看我的ES5传输代码时，我发现以下代码：

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

正如您所看到的-no

http

注入到

MyService

。更改服务构造函数以使用此语法时

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

现在我得到以下错误：

Error: No provider for Http!

问题的解决方案：

所以我最终成功了，使用@PierreDuc response的线索：

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

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

我将

HTTP\u提供者

作为提供者添加到我的组件（使用该服务）中： （在我的ng 2组件中：）

providers:[MyService，HTTP\u providers]

在我的引导程序中不需要

@Injectable

或

addProvider

我不完全理解为什么会发生这种情况，以及为什么这个解决方案有效。如果这里有人知道的话，我很想让人解释一下

解决方案编辑：

---

读了一点书后，我现在对DI有了更好的理解。我可以使用

addProvider（HTTP\u PROVIDERS）

而不是为每个组件定义一个提供程序（它将可用于所有组件）。唯一的谜团是为什么注入

私有http:http

不起作用，而

@Inject（http）http

起作用。有什么想法吗

您应该在引导中添加

HTTP\u提供程序

，而不仅仅是

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

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

编辑

除此之外，
MyService.ts
必须有一个
@Injectable（）
装饰器，让angular知道它必须注入依赖项。
数据服务的注入之所以有效，是因为您使用了decorator
@Inject
。在
MyService.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']);

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

从'angular2/core'导入{Injectable}；
从'angular2/Http'导入{Http}；
从“rxjs/Observable”导入{Observable}；
@可注射（）
导出默认类MyService{
构造函数（私有http:http）{}
getData（）：可观察{
返回此。\u http.get（someUrl）；
}
}
啊，是的，你又忘了一件事。我将编辑我的回答，没有任何网络/控制台错误。。。这很奇怪。你确定你用
Injectable
试过它，而不是
injected
吗？我看不出它不起作用的原因。向适配器中添加
HTTP\u提供程序
，并添加
@Injectable
确实应该可以做到这一点。您是否将
angular2/bundles/http.min.js
脚本添加到
index.html
？将
http\u提供程序添加到组件而不是引导程序听起来与我的直觉背道而驰。以及为每个服务/提供商使用
@Inject
。将
@Injectable
添加到
MyService
很有可能现在也能正常工作（在将http\u提供程序添加到组件之后），而无需在构造函数中添加
@injection
。但是，很高兴你找到了解决办法：）我知道，这很奇怪。我会继续玩这个，非常感谢你的帮助！所以我终于成功了，根据@PierreDuc回复中的线索，在这种情况下，你应该给他们一些信任：）我做到了！但这不是问题的解决方案，所以我不能把它标记为答案，因为它不是答案…我来晚了，但对其他未来的读者来说。。。应用@Injectable（）修饰符是一种“最佳实践”​[向您的所有服务]从一开始​ 既为了一致性，也为了将来的验证”。