本文讨论如果两个 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.

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

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

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

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

Observable Service Solution

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

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

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

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

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

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

使用 Rxjs 解决 Angular Component 之间的通信问题相关推荐

三层交换解决了VLAN之间的通信问题
开关的转发过程. 开关工作于OSI参考模型的第二层,也就是数据链路层.在每一个端口成功连接时,交换机内部的CPU通过对应MAC地址和端口形成一张MAC表.开关基于MAC地址表来转发数据. 路由转发过程 ...
UVM中component之间如何通信
在简单的测试平台里,component之间通过变量或者config_db机制通信是可行的,但是如果在复杂测试平台中依然使用这种耦合性很强的方式通信的话,就不太行了.因此,UVM提供了TLM这样的概念. ...
Angular Component之间的事件通知机制
例子:book manage Component里有个app-search-input控件,通过searchEventEmitter发送事件给自己的searchEventHandler: search ...
java如何确保单线程_java是如何解决单线程之间的通信问题呢？这篇文章给你答案...
人与人之间通过交流构成了这个丰富多彩的世界,在计算机中,通过即时通信工具传递信息为我么的生活增添了很多乐趣也提供了很多遍历,而在java线程的世界里,线程之间的通信,可以极大的增强我们的功能,今天就带 ...
Android使用Fragment来实现TabHost的功能（解决切换Fragment状态不保存）以及各个Fragment之间的通信...
以下内容为原创,转载请注明:http://www.cnblogs.com/tiantianbyconan/p/3360938.html 如新浪微博下面的标签切换功能,我以前也写过一篇博文(http:/ ...
如何解决服务之间的通信问题？
文章目录 1.如何解决服务之间的通信问题? 2.如何在java代码中发起http方式请求? 3.实现服务间通信的小案例 3.1 使用两个测试服务用户服务users和订单服务orders 3.2 用户 ...
使用reflux进行react组件之间的通信
前言组件之间为什么要通信?因为有依赖. 那么,作为React组件,怎么通信? React官网说, 进行父-子通信,可以直接pass props. 进行子-父通信,往父组件传给子组件的函数注入 ...
黑马程序员--线程之间的通信，等待与唤醒机制，线程的终止方式，线程中的其他方法，优先级，toString() 守护线程，GUI图形化界面
------<a href="http://www.itheima.com" target="blank">Java培训.Android培训.iOS ...
三层交换机解决不同VLAN间的通信—Vecloud微云
交换机的转发过程交换机工作于OSI参考模型的第二层,即数据链路层.交换机内部的CPU会在每个端口成功连接时,通过将MAC地址和端口对应,形成一张MAC表.交换机根据MAC地址表转发数据. 路由器的转 ...

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

Event Bus Solution

Observable Service Solution

使用 Rxjs 解决 Angular Component 之间的通信问题相关推荐

最新文章

热门文章