javascript – Angular 2.0 – 注入的Http服务未定义

前端之家收集整理的这篇文章主要介绍了javascript – Angular 2.0 – 注入的Http服务未定义前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
评论 – 我设法解决了这个问题,请看这个帖子的底部

我正在升级我的Angular 1.X应用程序使用UpgradeAdapter(ngUpgrade).我添加了一个从Angular 2.0组件调用的新的Angular 2.0服务:

服务:

  1. import {Inject} from 'angular2/core';
  2. import {Http} from 'angular2/http';
  3. import {Observable} from 'rxjs/Observable';
  4.  
  5. export default class MyService {
  6. _http;
  7. constructor(http: Http) {
  8. this._http = http; //http is undefined here
  9. }
  10.  
  11. getData(): Observable<any> {
  12. return this._http.get(someUrl);
  13. }
  14. }

在我的bootstrap.ts我有:

  1. declare var angular: any;
  2.  
  3. import {UpgradeAdapter} from 'angular2/upgrade';
  4. import {Http} from 'angular2/http';
  5.  
  6. let adapter = new UpgradeAdapter();
  7.  
  8. adapter.addProvider(Http);
  9.  
  10. //.....
  11.  
  12. adapter.bootstrap(document.body,['myApp']);

我在这里做错了什么?

编辑:

我正在注入另一项服务(Angular 1.X升级服务)到我的Angular 2.0服务,它的工作:

  1. import {Inject} from 'angular2/core';
  2. import {Http} from 'angular2/http';
  3. import {Observable} from 'rxjs/Observable';
  4.  
  5. export default class MyService {
  6. _http;
  7. _dataService;
  8. constructor( @Inject('dataService') dataService,http: Http) {
  9. this._http = http; //http is undefined here
  10. this._dataService = dataService; //dataService is defined!!
  11. }
  12.  
  13. getData(): Observable<any> {
  14. return this._http.get(someUrl);
  15. }
  16. }

Bootstrap.ts:

  1. declare var angular: any;
  2.  
  3. import {UpgradeAdapter} from 'angular2/upgrade';
  4. import {Http} from 'angular2/http';
  5.  
  6. let adapter = new UpgradeAdapter();
  7.  
  8. adapter.addProvider(Http);
  9.  
  10. adapter.upgradeNg1Provider('dataService');
  11.  
  12. adapter.bootstrap(document.body,['myApp']);

编辑2:

当看到我的ES5发现的代码,我发现这个代码

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

如你所见 – 没有http注入到MyService.当更改我的服务构造函数以使用此语法

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

现在我收到以下错误

  1. Error: No provider for Http!

解决问题的方法

所以我终于成功了,用@PierreDuc回应的线索:

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

  1. 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
  1. declare var angular: any;
  2.  
  3. import {UpgradeAdapter} from 'angular2/upgrade';
  4. import {HTTP_PROVIDERS} from 'angular2/http';
  5.  
  6. let adapter = new UpgradeAdapter();
  7.  
  8. adapter.addProvider(HTTP_PROVIDERS);
  9.  
  10. //.....
  11.  
  12. adapter.bootstrap(document.body,['myApp']);

编辑

此外,MyService.ts必须有一个@Injectable()装饰器才能让角度知道它必须注入它的依赖关系.注入dataService的原因是因为你使用了装饰器@Inject.尝试这个MyService.ts

  1. import {Injectable} from 'angular2/core';
  2. import {Http} from 'angular2/http';
  3. import {Observable} from 'rxjs/Observable';
  4.  
  5. @Injectable()
  6. export default class MyService {
  7.  
  8. constructor(private _http: Http) {}
  9.  
  10. getData(): Observable<any> {
  11. return this._http.get(someUrl);
  12. }
  13. }

猜你在找的JavaScript相关文章