ディレクティブでchildren要素のイベントを聴くにはどうすればよいですか？

Question

テンプレートがないので、ディレクティブ内の子要素イベントを監視するにはどうすればよいでしょうか？ HostListenerで可能ですか？そうでない場合、他の方法はありますか？

このような質問もあります：How to listen for child event from parent directive in Angular2しかし、私のディレクティブと子要素が同じテンプレートにない（ホスト上のディレクティブ）ため、提案された方法では私の問題は解決しません。

乾杯！

編集＃1

これは、（より良い方法がなければならない）私は現在、それをやっている方法です：

まず私の指示にElementRefを注入：

constructor(private elView: ElementRef) {} 

次に、jQuery（またはプレーンJS）をバインドします。

$(this.elView.nativeElement) 
.on('drag', '#childId', this.slide.bind(this)) 

Answer 1

聴きたいイベントが泡ネイティブDOMイベントである場合は、ちょうど彼らが子コンポーネントの出力である場合は、あなたがそれらを照会し、その出力

を購読することができます @HostListener()

@HostListener('click', ['$event']) 
handleClick(event) { 
    // handle event 
} 

を使用することができます

@ContentChildren(ChildComponent) children:QueryList<ChildComponent>; 

ngAfterContentInit() { 
    this.children.toArray().forEach((item) => { 
    item.someOutput.subscribe(...); 
    }); 
} 

あなたの質問にリンクしている回答に使用されているアプローチを使用することができます。

Answer 2

コンポーネントをサービスクラスを介して相互に通信させることを検討することがあります。

// service class 
class Service { 
    private someEventSource = new Subject(); 
    public someEvent = this.someEventSource.asObservable(); 

    public invokeAnEvent (data: string) { 
    this.someEventSource.next(data); 
    } 
} 

// parentComponent class 
Service.someEvent.subscribe(data => { 
    console.log(data); 
}); 

// childComponent class 
Service.invokeAnEvent('some data to pass'); 

アンギュラドキュメントから

：
https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service