从根组件向路由器出口子组件发出事件

Question

我有以下结构： app.component.html 包含以下组件：

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

我将componentB注入到router outlet，componentB有自己的router outlet。

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

我在 ComponentB 的路由器出口中注入了 componentC

<componentC>

我想从 ComponentA 向 ComponentC 发送一个事件。

我正在尝试使用服务来完成此操作，方法是将其注入发送事件的 ComponentA 中，而 ComponentC 正在通过注入的服务订阅事件。组件 C 未接收事件。

但是，如果我将 componentA 移动到 ComponentB 中，则事件会成功发送到 ComponentC。

当 ComponentA 位于 app.component.html 的根目录时，如何从 ComponentA 向 ComponentC 发出事件？

[更新]

我按照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);
});

我正在使用 Angular RC5。知道我缺少什么吗？

Answer 1

起初，路由器不会将组件添加到<router-outlet>，而是使其成为兄弟。这是因为 ViewContainerRef.createComponent 的工作原理。

从EventEmitter 发送的事件也不会冒泡，因此只能用于在使用(event)="doSomething()" 的子元素上添加事件处理程序。

共享服务通常适合您的情况。 更多详情见https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service