が流出子コンポーネント

Question

をルータにルートコンポーネントからイベントを発する私は、次の構造を有する： app.component.htmlは、次のコンポーネントを保持します。

<componentA> 
<router-outlet></router-outlet> 

私は、ルータのコンセントにcomponentBを注入し、componentBは、独自のルータを持っています出口。

<componentB><router-outlet></router-outlet></componentB> 

私はComponentAからComponentCにイベントを送りたい

<componentC> 

ComponentB'sルータ口の内側componentCを注入。

私はイベントを送信するComponentAに注入し、ComponentCが注入されたサービスを通じてイベントを購読することによって、これを達成するためにサービスを使用しようとしています。コンポーネントCはイベントを受信して​​いません。

しかし、ComponentAをComponentB内に移動すると、イベントは正常にComponentCに送出されます。

ComponentAがapp.component.htmlのルートにある場合、どのようにイベントをComponentAからComponentCに送信できますか？

[UPDATE]

Iはbidirectional service上例に従っが、イベントがまだ受信していません。

が

私のサービスは：

import { Injectable } from '@angular/core'; 
import { Subject } from 'rxjs/Subject'; 

@Injectable() 
export class MyService { 
    private mySource = new Subject<string>(); 
    source$ = this.mySource.asObservable(); 
    sendEvent(stringParam: string) { 
     this.mySource.next(stringParam); 
    } 
} 

成分Aは

this.myService.sendEvent("test"); 

成分Cは、サブスクライブイベントを送信し、私は角使用しています

this.subscription = this.myService.source$.subscribe(stringParam => { 
    console.log('Received event: ' + stringParam); 
}); 

イベントをリッスンここでは、コードですRC5。私の欠点は何ですか？まず

Answer 1

、ルータは<router-outlet>にコンポーネントを追加しますが、それ兄弟なりません。これは、ViewContainerRef.createComponentの仕組みのためです。

EventEmitterから送信されたイベントもまたバブルしないため、(event)="doSomething()"を使用して子要素にイベントハンドラを追加する場合にのみ使用できます。

あなたの状況では、通常、共有サービスが適しています。 詳細については、https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service