2015-12-24 20 views
9

コメントを定義されていない - 私は、この問題を修正私はUpgradeAdapter(ngUpgrade)を使用して、私の角度1.Xアプリケーションをアップグレードしています。この記事2.0アンギュラ - 注入HTTPサービスは

の底に見ることができました。

サービス::私は私のbootstrap.tsインサイド

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); 
    } 
} 

:私は私の角2.0 Componentから呼び出す新しい角度2.0サービス追加

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']); 

を私はここで間違って何をしているのですか?

EDIT

私は私の角2.0サービスに別のサービス(角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

012何 http注入を MyServiceに - あなたが見ることができないとして

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

私ES5を見て、私はこのコードを見つけたコードを蒸散しました。手がかりを使用して、は

は、だから私は最終的に成功する:問題の

Error: No provider for Http! 

ソリューション:この構文を使用するように私のサービスのコンストラクタを変更する場合は

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

今、私は次のエラーを取得しています@PierreDucからの応答:

MyServiceのコンストラクタを次のように変更しました:

私のngの2コンポーネント:)

providers: [MyService, HTTP_PROVIDERS]

私のブートストラップの内側@InjectableまたはaddProviderは必要ないの内側( :

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

は、と私は(サービスを使用しています)私のコンポーネントへのプロバイダとしてHTTP_PROVIDERSを追加しました。

なぜこのようなことが起こっているのか、なぜこの解決策が機能したのか、私は完全に理解していません。ここに誰かがそれを知っているなら、それを説明するのが大好きです。

ソリューション編集:

少し読んだ後、私は今より良いDIを理解しています。各コンポーネントのプロバイダを定義するのではなく、addProvider(HTTP_PROVIDERS)を使用できます(すべてのコンポーネントで使用可能です)。残っている唯一の謎は、なぜ@Inject(Http) httpが機能するのに対し、private http: Httpの注射は機能しないのです。何か案が???

+0

のためにこれを試してみてください、あなたはおそらく、その場合には、それらにいくつかの信用を与える必要があります:)私がやった – christiandev

+0

!しかし、問題の解決策ではないので、回答ではないので答えとしてマークすることはできません。 –

+0

私は党に遅れていますが、将来の他の読者には... "最高です一貫性と将来のために@Injectable()デコレータを最初からすべてのサービスに適用する " - [サービスチュートリアル](https://angular.io/docs/ts/)最新/チュートリアル/ toh-pt4.html)。 –

答えて

4

Httpではなく、HTTP_PROVIDERSをブートストラップに追加する必要があります。 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を使用したためです。私は最終的に@PierreDucのresponse_から手掛かりを使用して、成功し_So 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); 
    } 
} 
+0

それは役に立たなかった...まだ未定... –

+1

ああ、あなたはもう一つ忘れました。私は自分の答えを編集します – PierreDuc

+0

申し訳ありません、すでにこれを試しました - まだ定義されていません –

関連する問題