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

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

我正在升级我的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:

当看到我的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组件:)

提供者:[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);
  }
}
原文链接:https://www.f2er.com/js/154090.html

猜你在找的JavaScript相关文章