Angular2 - サービスの提供元が見つかりません

Question

私のアプリケーションには3つのコンポーネントが定義されています。 AppComponent、MainComponentおよびTextComponentです。

AppComponentには、次のようにMainComponentが含まれています。私はプロバイダに含まれている2つのサービスは、属性私は、CommonEventsService、CommonProductEventsService

@Component({ 
    selector: 'my-app', 
    template: ` 
    <my-main></my-main> 
    `, 
    providers: [CommonEventsService, CommonProductEventsService], 
    directives: [ROUTER_DIRECTIVES, MainComponent] 
}) 
export class AppComponent implements OnInit, OnDestroy {...} 

主なコンポーネントはAppComponentに属性のディレクティブに含まれていることに注意してください。メインコンポーネントは次のように定義されています。

@Component({ 
    template: "<my-add-text></my-add-text>", 
    selector: "my-main", 
    directives: [TextComponent] 
}) 
export class MainComponent implements OnInit, OnDestroy {...} 

上記のディレクティブ属性にTextComponentが含まれています。 TextComponentは次のように定義されています：

@Component({ 
    selector: "my-add-text", 
    templateUrl: "/app/scripts/components/add/text.component.html", 
}) 
export class TextComponent { 
constructor(private commonProductEvents: CommonProductEventsService){} 
} 

問題がアプリケーションが読み込まれると、次のエラーが発生します。

EXCEPTION: No provider for CommonProductEventsService! (TextComponent -> CommonProductEventsService) in [addText in MainComponent@41:13] 

しかし、私はCommonProductEventsServiceをAppComponentに登録しました。では、なぜこのエラーが発生していますか？

Answer 1

再生できません。 Working Plunkerを参照してください。

は、ファイル内のコンポーネントと同じファイルに

CommonEventsService 
CommonProductEventsService 

を持っていますが、さらに下回っていますか？

次に、それらを上に移動する必要があります。forwardRefを使用するか、別のファイルとして移動してインポートしてください。 []配列：

も参照してください
- - https://angular.io/docs/ts/latest/api/core/forwardRef-function.html http://blog.thoughtram.io/angular/2015/09/03/forward-references-in-angular-2.html