本文讨论如果两个 Angular Component 彼此不知道对方的存在，并且也没有共享的父子 Component 时，如何进行通信。

在包括 Angular 在内的许多前端框架中，当我们将应用程序或页面划分为许多小的 UI 组件并将事件绑定到一个嵌套了很多层的组件时，总是存在通信问题。

在 Angular 中，我们使用 @Output() 和 @Input()。 这在正常情况下能够很好的工作，但是当我们想要绑定传入的数据并将传出的事件绑定到一个 container 组件时，管理起来可能是一场噩梦。

我们需要在组件的很多层级上添加大量的 @Input() 和@Output()。

本文介绍两种解决方案：

- Event Bus by using Subject.
- Observable Service with Behavior Subject.

讨论的场景是，有一个 Angular Component 具有很多 article list，点击某个项目，能查看 article 明细。

# Event Bus Solution

我们创建一个全局可用的 event bus service.

然后，我们可以向 bus 发出事件，如果有任何侦听器注册到该事件名称，那么它将执行回调函数。

在本文中，我将使用 RsJS subject 创建 event bus service.

![](https://img-blog.csdnimg.cn/img_convert/aef4bd81887f219eeff0c4bf3138253f.png)

从文章列表中，每次用户点击该项目时，它会发出一个事件并将文章数据传递到 event bus.

![](https://img-blog.csdnimg.cn/img_convert/945f94bcb45cd3004e8bb24331657e88.png)

上图代码展示了如何把事件 SelectArticleDetail 连同选中的 article 数据，一起通过 event bus 发送出去。

接下来，我们在 Article Detail Component 里使用 event bus service 的 on 方法，监听后者抛出的 SelectArticleDetail 事件。

![](https://img-blog.csdnimg.cn/img_convert/006c9f2efffe6d23b7cab24161c639ef.png)

这里我们定义的回调函数，将 event bus service 抛出的 Article 数据，保存到 Component 属性 detail 里。

# Observable Service Solution

这个想法很简单，就是创建一个库存来传递里面的值。 所以每次库存变化时，观察者都会知道它并执行回调。
我们使用名为inventorySubject$ 的默认文章值和addToInventory() 方法创建一个BehaviorSubject，以将文章添加到库存中。

![](https://img-blog.csdnimg.cn/img_convert/dea66b73b613da77ccd9fd05ca5bf7bc.png)

在 article list 里，每次用户点击一个条目时，调用 Observable service addToInventory 方法，将当前 article 传入 this.inventorySubject$.next 方法。

![](https://img-blog.csdnimg.cn/img_convert/c829e6792f3a142eea2d4e8e50debff9.png)

然后在 article detail Component 里，我们订阅 this.inventorySubject$ 的变化：

![](https://img-blog.csdnimg.cn/img_convert/f4b1bffe561a9c28bdddbef9dc4ea1fd.png)

什么时候使用这两种方案？

我们使用 Observable Service 订阅简单案例的数据，我们使用 Event Bus 将不同的事件名称分派给不同的侦听器。

ITPub博客

使用 Rxjs 解决 Angular Component 之间的通信问题