关于javascript:使用-Rxjs-解决-Angular-Component-之间的通信问题

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

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

在 Angular 中，咱们应用 @Output() 和 @Input()。这在失常状况下可能很好的工作，然而当咱们想要绑定传入的数据并将传出的事件绑定到一个 container 组件时，治理起来可能是一场噩梦。

咱们须要在组件的很多层级上增加大量的 @Input() 和 @Output()。

本文介绍两种解决方案：

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

咱们创立一个全局可用的 event bus service.

而后，咱们能够向 bus 收回事件，如果有任何侦听器注册到该事件名称，那么它将执行回调函数。

在本文中，我将应用 RsJS subject 创立 event bus service.

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

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

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

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

这个想法很简略，就是创立一个库存来传递外面的值。所以每次库存变动时，观察者都会晓得它并执行回调。
咱们应用名为 inventorySubject$ 的默认文章值和 addToInventory() 办法创立一个 BehaviorSubject，以将文章增加到库存中。

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

而后在 article detail Component 里，咱们订阅 this.inventorySubject$ 的变动：

什么时候应用这两种计划？

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

更多 Jerry 的原创文章，尽在：” 汪子熙 ”:

Event Bus Solution