Angular2在非父子组件之间传递数据答案

【问题标题】：Angular2 passing data between NON parent - child componentsAngular2在非父子组件之间传递数据
【发布时间】：2017-09-04 21:25:00
【问题描述】：

所以我有两个组件 - 就它们在组件层次结构中的位置而言，一个就像另一个组件的第三个删除的祖父母 - 我希望在它们之间传递数据。我认为这样做的方法是编写这样的服务：

@Injectable()
export class DataService {
  dataChange: EventEmitter<any> = new EventEmitter<any>();

  constructor() {}
  change(data){
          this.dataChange.next(data)
      }
  }
}

然后在两个组件上订阅它，并在它们想要传递数据时调用 change 函数。不过，Angular2 似乎不喜欢这样，只是忽略了订阅中的任何内容。我已经控制台记录了订阅，它们被“订阅”并打开。

我可以通过调用组件本身并使用 jQuery 或 vanilla Javascript 来操作 DOM 来解决这个问题，但我不能在组件本身上设置值，因为 Angular2 也不喜欢人们这样做，并且只会删除所有订阅。

实际上如何以 Angular2 的方式在两个远距离的组件之间传递数据？

编辑：在此处打开问题： https://github.com/angular/angular/issues/15856

【问题讨论】：

标签： angular

【解决方案1】：

您至少在使用服务方面走在了正确的轨道上。 Angular Docs 有一篇很好的文章，可以在这里找到：https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

文档的标题暗示了父子关系，但只要将服务注入到两个组件中，它应该以相同的方式工作。

【讨论】：

【解决方案2】：

请参阅 Github 问题以获得更好的响应：

所以我做错了，我将服务作为提供者放在两个组件中，但我需要做的是把服务作为提供者放在组件层次结构的顶部 - 在我的实例 app.component.ts .

然后只需将服务导入到这两个组件中（不让它们成为提供者）。

【讨论】：