评论 – 我设法解决了这个问题,请看这个帖子的底部
我正在升级我的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);
- }
- }