注入エラー：すべてのパラメータを解決できません

Question

にHttpサービスを注入しようとするとこのエラーが発生します。

import {Component} from 'angular2/core'; 
import {Http} from 'angular2/http'; 

export class PanelsService { 

    constructor(public http:Http) { } 

    getPanelFilters() { 
    var url = '../../data/panelFilters/' + 13677 + '.json' 

    return this.http.get(url) 
    } 

} 

私は私のSidebarComponentからPanelsServiceにアクセスしようとしています：私は使用して試した

"emitDecoratorMetadata": true, 
"experimentalDecorators": true, 

：

import {PanelsService} from '../panels/panels.service'; 

@Component({ 
    .... 
    providers: [PanelsService] 
}) 

export class SidebarComponent implements OnInit { 

    constructor(public panelsService:PanelsService) { } 

    ngOnInit() { 
    console.log('I am the sidebar component'); 
    } 

} 

私のtsconfig.jsonもラインを持っていることに留意すべきです@Injectableが実証済みのようにhereですが、私のクラスを@Injectable()で飾ると、 OLE：

boot.jsは、単に私のアプリのコンポーネントをブートストラップし、それはすべての依存関係を注入しない：

import {bootstrap} from 'angular2/platform/browser'; 
import {AppComponent} from './components/app.component'; 

bootstrap(AppComponent).catch(err => console.error(err)); 

任意の助けいただければ幸いです。

Answer 1

コードに欠落しているものが1つあります。プロバイダー。

export class PanelsService { 

    constructor(public http:Http) { } 
} 

あなたは、インジェクタトークンHttp（型注釈）を特定し、依存関係を求めると

。しかし、あなたのコードには（少なくともここに示すように）何もありません。あなたのインジェクタにを教えてください。トークンを返す必要があります。Http。情報の半分にすぎません。

依存関係を解決するには、トークン（私たちが求めているもの）とプロバイダ（私たちが求めているオブジェクトを作成するもの）が必要です。プロバイダはbootstrap()の間、または@Component()デコレータのprovidersプロパティを使用してコンポーネントレベルで設定できます。

毎回Httpの新しいインスタンスを作成する場合を除き、そのプロバイダをbootstrap()に設定すると、アプリケーション全体で同じインスタンスを使用できるようになることが最も理にかなっています。

import {provide} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser'; 
import {Http} from 'angular2/http'; 

bootstrap(YourApp, [ 
    provide(Http, {useClass: Http}) 
]); 

provide()は、トークンHttpを取り、何か（useClass: Http）のオブジェクトを作成する方法について説明しますレシピとプロバイダを設定します。ここでは

はHttpのプロバイダは、次のようになりものです。それが判明するのでHttpはDIを使用していることを、私たちはこれだけでは不十分であることを認識しましょう、しかし

bootstrap(YourApp, [ 
    Http 
]); 

：レシピはuseClassで、クラスがトークンと同じであれば、我々は以下の省略形の構文を使用することができます独自の依存関係もあります。つまり、これらの依存関係にもプロバイダが必要です。幸いにも、これらのケースでは、Angularはすでにプロバイダの定義済みリストを提供しています。

HTTP_PROVIDERSは、Httpを動作させるために必要なプロバイダー構成の集まりです。だから、あなたがしなければならないすべては、次のとおりです。

import {HTTP_PROVIDERS} from 'angular2/http'; 

bootstrap(YourApp, [HTTP_PROVIDERS]); 

今すぐあなたのアプリは何Http約すべての依存関係、トークンとプロバイダを知っています。

詳しくは、articleをご覧ください。