Angular2のネストされたコンポーネントを介してイベントを放出

Question

Output()デコレータを使用して、親コンポーネントがそれを捕捉できるように子コンポーネントからイベントを放出することができます。私が必要とするのは、必ずしも特定のコンポーネントの直接の子ではない子コンポーネントによって放出されるイベントを捕捉することです。

ComponentTwoをイベントを発生させるコンポーネントとします。アプリの構造がApp -> ComponentTwoの場合、ComponentTwoのイベントを簡単に捕捉できます。しかし、App -> ComponentOne -> ComponentTwoのような構造を考えると、エミッタを直接捕らえることはできません。

ここには、問題を示すplunkerがあります。

したがって、すべての親コンポーネントに伝播イベントをソートする方法はありますか？ありがとう。

Answer 1

このようなイベントのバブリングはサポートされていません。あなたは手動でそれらを捕まえて、親に放出する必要があります。

もう1つのアプローチは、コンポーネントのこのツリーに対して共有サービスを活用し、その中にオブザーバブル/サブジェクトを使用することです。

このようにして、すべてのコンポーネントはサブサブアディレイ内でもイベントの通知を受けるためにサブスクライブできます。

constructor(private service: SharedService) { 
    this.service.notifier$.subscribe(
    data => { 
     (...) 
    }); 
} 

イベントは、このようにトリガされます。

constructor(private service: SharedService) { 
} 

notify() { 
    this.service.notifier$.next('some data'); 
} 

は、詳細については、このリンクを参照してください：

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