评论 – 我设法解决了这个问题,请看这个帖子的底部
我正在升级我的Angular 1.X应用程序使用UpgradeAdapter(ngUpgrade).我添加了一个从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 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); } }
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:
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组件:)
提供者:[MyService,HTTP_PROVIDERS]
我的引导中不需要@Injectable或addProvider.
我不完全明白为什么会发生这种情况,为什么这个解决方案可行.如果有人在这里知道,会很乐意解释.
解决方案编辑:
经过一番阅读后,我现在明白DI了.我可以使用addProvider(HTTP_PROVIDERS)而不是为每个组件定义提供程序(它将适用于所有组件).唯一的谜题是为什么注册私人http:Http不工作,而@Inject(Http)http的工作.任何想法???
解决方法
您应该在引导程序中添加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); } }