Angular2：rxjs Angular2のサブジェクト親子コンポーネントのやりとり

Question

ディレクティブによって発行されたイベントを手動で購読したいのですが、これは設計上、アプリケーションの複数のコンポーネントで使用できるはずです。

AppComponent 
    Draggable.Directive (uses an attribute of a DOM element to control the behaviour) 

    (and then, via routing) 
    Parent1 Component 
    Child1 Component 
    Child2 Component 

app.module次のようになります：後半、開発中

@NgModule({ 
    imports:  [ BrowserModule, HttpModule, JsonpModule, RouterModule.forRoot(appRoutes) ], 
    declarations: [ AppComponent, FooComponent, BarComponent, ParentComponent, DraggableDirective ], 
    bootstrap: [ AppComponent ] 
}) 

、別の親コンポーネントをドラッグディレクティブに耳を傾け、独自のを実装します現時点では構造がこのようになります。論理。

子コンポーネントは、何もしないDraggable Directiveについて知っている（または気にする必要がありません）。親コンポーネントが必要です。

import { Directive, ElementRef, Renderer, HostListener, AfterViewInit } from '@angular/core'; 
import {Subject} from 'rxjs/Rx'; 

@Directive({ 
    selector: '[draggable], [data-draggable]' 
}) 

export class DraggableDirective implements AfterViewInit { 

    public droppedOn = new Subject(); 

    //... at some point this method is envoked 
    couldDrop():void { 

     if (this.dElem) { 
      let _attr = this.dElem.dataset.indexed; 
      console.log('emitting', _attr); 
      this.droppedOn.next(_attr); 

     } 

    } 
} 

は私が正しいと「発光」のコンソールログを取得：だから、親コンポーネントに：他の場所で推奨されているように、ここで

import { Component, OnInit, ViewChild } from '@angular/core'; 
import { DraggableDirective } from './draggable.directive'; 
import { FooComponent } from './foo.component'; 
import { BarComponent } from './bar.component'; 

@Component({ 
    selector: 'parent-view', 
    templateUrl: './parent.component.html', 
    providers: [DraggableDirective], 
    moduleId: module.id 
}) 

export class ParentComponent implements OnInit { 
    @ViewChild('foo') fooC:FooComponent; 
    @ViewChild('bar') barC:BarComponent; 

    constructor(private draggable:DraggableDirective){ 
    draggable.droppedOn.subscribe(event => { 
     console.log('listening', event); 
    }) 
    } 

    ngOnInit(): void { 
    // updated 
    // child view components 
    this.fooC.fooInit(); 
    } 

と被写体としませ持つEventEmitterを、使用してディレクティブ、あります値。私は決してコンソールの親コンポーネントから "リッスン"することはありません。私はここで間違って何をしていますか？

Answer 1

作成したディレクティブはサービスではありませんので、代わりに@Componentのproviders配列には入りませんが、代わりにdeclarationsになります。 https://angular.io/docs/ts/latest/guide/attribute-directives.htmlを参照してください（NgModuleにも追加できます）

ParentComponentParentComponentまた、テンプレートのどこかでコンストラクタに使用されているディレクティブのインスタンスを取得できません。それはViewChildrenのためです。例：https://angular.io/docs/ts/latest/api/core/index/QueryList-class.html

ParentComponentでは、DraggableDirectiveという別のインスタンスにテンプレートが使用しているものを購読しています。