角2：（インジェクション）サービスのプロバイダがありません

Question

私のアプリケーションにはMainServiceとRightClickServiceという2つのサービスがあります。 MainServiceだけがアプリケーションでグローバルにアクセスでき、RightClickServiceはMainServiceに注入されます。したがって、私は、次のファイルを定義した：

app.module.ts

@NgModule({ 
    declarations: [ 
    AppComponent, 
    ... 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule 
    ], 
    providers: [MainService], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

RightClickServiceはapp.module.tsに記載されていません。

service.ts

@Injectable() 
export class MainService { 

    constructor(private rightClickService: RightClickService) { 
    console.log("Constructor is init"); 
    } 
} 

RightClickServiceだけ大きなアプリケーションRightClickComponent内という名前のコンポーネントに存在します。

右click.component.ts：

@Component({ 
    selector: 'right-click', 
    template: ` 
    ... 
    `, 
    styleUrls: ['...'], 
    providers: [RightClickService] 
}) 
export class RightClickComponent implements OnInit { 

    constructor(private rightClickService: RightClickService) {} 

} 

はそれでも、私はエラーを取得する：

EXCEPTION: No provider for RightClickService! 

あなたは私が間違ってやっている知っていますか？

Answer 1

すでに言ったことに加えて、あなたは二つのことを知っている必要があります。

1. アプリはAppModule含め、アプリ内の任意のモジュールの@NgModule.providers配列にdelcaredすべてのプロバイダが含まれているだけで1つのルート注入器を持っています。

2. 各コンポーネントには、コンポーネントの@Component.providersで宣言されたプロバイダを含む独自のインジェクタ（ルートインジェクタの子インジェクタ）があります。

角度希望は、彼がすべてのNgModulesのプロバイダを含むルートインジェクタでそれを探しサービス（MainService）の依存関係（RightClickServiceを）解決します。

角度希望は、彼が見つからない場合には見られない彼がどうなるならば、彼は親コンポーネントインジェクターでそれを探しコンポーネントインジェクタでそれを探しコンポーネント（RightClickComponent）の依存関係（RightClickServiceを）解決します根のインジェクタに到達するまで同じエラーが発生した場合、エラーが発生します。

あなたはこれを行うことができ、問題を解決したい場合：

function MainServiceFactory(RightClickService) { 
    return new MainService(new RightClickService()); 
} 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    ... 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule 
    ], 
    providers: [ 
    { 
    provide: MainService, 
    useFactory: MainServiceFactory, 
    deps: [RightClickService] 
    } 
], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Answer 2

私はちょうどPlunkerにこれを引っ張って、私が何かを誤って入力していない限り...何を持っていることは動作するようです。だから多分何か間違っている？

あなたがここにplunkerをチェックアウトすることができます：https://plnkr.co/edit/ea9dFs?p=info

（ツールは、私は、コードなしで掲載させません...しかし、あなたはすでに上記のコードを持っている...ので、私はちょうど一枚を貼り付けていますがそれの。）

import { Injectable } from '@angular/core' 

@Injectable() 
export class RightClickService { 

    constructor() { 
    console.log("RightClickService is init"); 
    } 
}