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

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

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


aef4bd81887f219eeff0c4bf3138253f.png


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

945f94bcb45cd3004e8bb24331657e88.png



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


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


006c9f2efffe6d23b7cab24161c639ef.png


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


Observable Service Solution

这个想法很简单,就是创建一个库存来传递里面的值。 所以每次库存变化时,观察者都会知道它并执行回调。

我们使用名为inventorySubject$ 的默认文章值和addToInventory() 方法创建一个BehaviorSubject,以将文章添加到库存中。


dea66b73b613da77ccd9fd05ca5bf7bc.png


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


c829e6792f3a142eea2d4e8e50debff9.png


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


f4b1bffe561a9c28bdddbef9dc4ea1fd.png


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


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

相关文章
|
2月前
|
JavaScript 前端开发 架构师
Angular进阶:理解RxJS在Angular应用中的高效运用
RxJS(Reactive Extensions for JavaScript)是JavaScript的一个响应式编程库,特别适用于处理异步数据流。
35 0
|
2月前
|
Web App开发 UED 开发者
谈谈企业级 Angular 应用的二次开发 - 基于 Angular Component 替换的 Extensibility 支持案例介绍
谈谈企业级 Angular 应用的二次开发 - 基于 Angular Component 替换的 Extensibility 支持案例介绍
|
2月前
|
编译器 API 开发者
Angular Component ɵcmp 属性的含义和使用场合介绍
Angular Component ɵcmp 属性的含义和使用场合介绍
|
2月前
|
API 开发者
Angular Component class ɵfac 的属性介绍
Angular Component class ɵfac 的属性介绍
|
2月前
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
|
2月前
|
JavaScript
Angular Component 内 set 关键字的使用
Angular Component 内 set 关键字的使用
|
8月前
|
前端开发 JavaScript 测试技术
什么是 Angular 的 Custom component
什么是 Angular 的 Custom component
|
9月前
|
UED
关于 Angular 应用里 Rxjs filter 操作符内的双重感叹号的用法
关于 Angular 应用里 Rxjs filter 操作符内的双重感叹号的用法
|
2月前
|
存储 前端开发 API
浅谈 Angular 应用前端消息显示机制的一个实际需求
浅谈 Angular 应用前端消息显示机制的一个实际需求
|
2月前
|
设计模式 JavaScript 前端开发
什么是 Angular 应用里的 Custom provider
什么是 Angular 应用里的 Custom provider