Angular 2.0 - 注入(inject)的 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 服务注入(inject)另一个服务(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 注入(inject) 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 组件中:)

提供者:[MyService, HTTP_PROVIDERS]

我的 Bootstrap 中不需要 @Injectable 或 addProvider。

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

解决方案编辑:

经过一些阅读，我现在对 DI 有了更好的理解。我可以使用 addProvider(HTTP_PROVIDERS) 而不是为每个组件定义提供程序(它将对所有组件可用)。剩下的唯一谜团是为什么注入(inject) private http: Http 不起作用，而 @Inject(Http) http 却起作用。任何的想法？？？

Answer 1

您应该在 Bootstrap 中添加 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 知道它必须注入(inject)它的依赖项。 dataService 注入(inject)起作用的原因是因为您使用了装饰器@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);
  }
}