在 Angular 开发中，我们经常需要对多个组件之间的事件进行交互控制。很多时候，我们需要进行某些操作，例如计算、过滤、组合等，然后再将结果反馈给用户。这时候，rxjs 可以非常方便地帮助我们完成这些操作，同时还能提供响应式编程的优势。
rxjs 简介
rxjs 是一个用于处理事件流并采用响应式编程的 JavaScript 库。它提供了一组丰富的操作符，可以用于处理和转换事件流及其元素，从而实现对事件的动态响应和控制。rxjs 具有以下核心特性：
- 响应式：rxjs 提供了一套完整的响应式编程范例，使开发人员可以使用高级的数据流操作符自由组合事件流，实现高效的业务逻辑。
- 功能强大：rxjs 提供了大量的操作符及其组合，可以用于处理任何类型的事件流，包括 HTTP 请求、鼠标事件、键盘事件、WebSocket 等等。
- 简单易用：rxjs 的操作符在使用时，大多数都是链式调用的方式，非常清晰易懂。rxjs 还提供了很多高阶函数，如 map、filter、reduce、merge 等，使得开发人员可以快捷地转换和操作事件流。
使用 rxjs 控制事件流
rxjs 的事件流由 Observable 对象管理，每当 Observable 对象发出新的事件，都会推送给订阅该对象的 Observer 对象。因此，rxjs 的基本使用方式可以表示为如下代码：
-- -------------------- ---- ------- -- -- ---------- ----- ---------- - --- --------------------- --- -- ---- ------------------------- -- ---- ---------------------- --- -- -- ---------- ----- ------------ - ------------------------ -- ---------------------- ----------
这段代码中，我们创建了一个简单的 Observable 对象，向其中发送一个 "hello" 事件，然后结束事件流。然后我们订阅了该 Observable 对象，使用箭头函数打印出接收到的事件。
在 Angular 开发中，我们可以使用 rxjs 来控制组件之间的事件流。下面是一个例子，假设我们需要实现一个搜索框组件，用户输入内容时，该组件将搜索内容发送出来，其他地方的组件响应搜索内容，显示搜索结果。那么我们可以在搜索框组件中使用 rxjs，将用户输入的内容作为事件流发送出去，其他组件订阅该事件流同步更新 UI。
Subject 和 BehaviorSubject
rxjs 提供了多种 Observable 类型，其中比较常用的是 Subject 和 BehaviorSubject。Subject 是一种基本的 Observable 类型，它可以用于向多个订阅者广播事件。当一个 Subject 收到一个事件时，它会将该事件广播给所有的订阅者。
// 创建 Subject
const subject = new Subject();
// 订阅 Subject
const subscription = subject.subscribe(val => console.log(`Received: ${val}`));
// 发送事件
subject.next('hello');
// 移除订阅
subscription.unsubscribe();这段代码中，我们创建了一个 Subject 对象，订阅了该对象，并在对象中发送了一个 "hello" 事件。观察到订阅该 Subject 的输出。
除了 Subject，rxjs 还提供了 BehaviorSubject 类型，它是一种特殊的 Subject，它会保存上一个事件的值，并将该值推送给新的订阅者。因此，BehaiviorSubject 可以用于“热启动”，即将上一次的事件值保存并传递给新的订阅者。
// 创建 BehaviorSubject
const behaviorSubject = new BehaviorSubject('init value');
// 订阅 BehaviorSubject
const subscription = behaviorSubject.subscribe(val => console.log(`Received: ${val}`));
// 发送事件
behaviorSubject.next('hello');
// 移除订阅
subscription.unsubscribe();这段代码中，我们创建了一个初始化值为 "init value" 的 BehaviorSubject 对象，并订阅了该对象。然后发送了一个 "hello" 事件，观察到输出的是初始化值和发送的事件值。
操作符
rxjs 提供了大量操作符和组合操作符，使得我们可以非常轻松地转换和操作事件流。这些操作符包括：map、filter、pluck、mergeMap、switchMap 等等。下面的示例代码演示如何使用 rxjs 来进行事件流转换。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------- - ---- -------
------ - ------------- --------------------- --------- - ---- -----------------
------ - ------------- - ---- -------------------
------------
--------- -------------
--------- -
-----
------ ----------- ------------------------ ------------------ --
------
----
--- ----------- ---- -- ---------------- ---- -------
-----
--
--
------ ----- --------------- ---------- ------ -
---------- - ---
------------- -------- - ---
------- ------------- - --- ------------------
------------------- -------------- -------------- --
---------- -
------------------
------
------------------
-----------------------
---------------- ------- -- --------------------------------
-
----------------- -- ------------------ - ---------
-
-------- -
-----------------------------------------
-
-这段代码中，我们创建了一个 SearchComponent，其中包含一个绑定到 searchTerm 属性的搜索框和一个显示搜索结果的 ul 列表。在组件初始化时，我们创建了一个 Subject 对象来作为搜索事件流的源头。在 ngOnInit 函数中，我们对搜索事件流进行了多种操作符的组合：debounceTime 用来限流，当用户不再输入时，延时 300ms 才开始搜索；distinctUntilChanged 用来过滤重复事件；switchMap 用来转换事件流，将 term 搜索关键字传递给后端的 searchService，并返回搜索结果。
在 search 函数中，我们将 searchTerm 发送给 searchSubject 而不是搜索服务，这样就将搜索变成了一次事件流。最后，将结果订阅到组件的 searchResult 属性中，以更新前端 UI。
总结
rxjs 是一种非常强大且灵活的事件流处理库，适合在 Angular 中使用。通过使用 rxjs，我们可以方便地转换和控制复杂的事件流，同时也可以使用 Angular 组件进行更好的 UI 交互。在使用 rxjs 进行事件流控制时，需要注意多种操作符的使用和组合，以达到最佳的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646dc179968c7c53b0c62b4f