Question

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

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

我将componentB注入路由器插座，而componentB有自己的路由器插座。

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

我在ComponentB的路由器插座中注入componentC

<componentC>

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

我正在尝试使用服务来实现这一点，方法是将其注入ComponentA，ComponentA发送事件，ComponentC通过注入的服务订阅事件。组件C未接收事件。

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

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

[UPDATE]

我按照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

首先，路由器不会将组件添加到 ViewContainerRef.createComponent中，但会将其设为兄弟。这是因为EventEmitter的工作方式。

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

在您的情况下，共享服务通常是正确的选择。有关详细信息，请参阅https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

从根组件发送到路由器出口子组件的事件

1 个答案: