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()装饰器让角度知道它必须注入其依赖项。注入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); } }

Angular 2.0 - Injected Http服务未定义

1 个答案: