在 Angular2+ 中，状态管理是非常重要的一部分，特别是在大型应用中。当组件的数量增加时，组件内部状态的管理变得更加困难。使用 RxJS 的 Subject 可以很好的解决这个问题，它提供了一种简单但强大的方式让组件之间进行数据传递，这篇文章将详细介绍这个主题。
Subject 对象
在 RxJS 中，Subject 是一种可以像观察者一样被订阅的对象。 Subject 具有 Observable 和 Observer 的双重角色，所以它既可以作为数据源，也可以作为数据的消费者。 Subject 允许多个观察者订阅，同时还可以通过 Subject.next() 方法来向这些观察者发送新数据。
使用 Subject 进行组件之间数据传递
在大多数 Angular2+ 应用中，存在多个组件之间需要相互通信的情况。此时，使用 Subject 就可以很好的解决这个问题。下面是一个简单的示例，展示了如何在两个组件之间进行数据传递。
假设有两个组件：SenderComponent 和 ReceiverComponent，它们之间需要共享数据。这时可以创建一个数据服务，用来管理 Subject 对象并在这两个组件之间共享数据。下面是一个简单的数据服务代码。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------- - ---- -------
-------------
------ ----- ----------- -
------- ------------- - --- ------------------
-------- - ----------------------------------
---------------------- ------- -
---------------------------------
-
-在这个服务中，我们创建了一个 Subject 对象来表示要共享的数据。然后我们把这个 Subject 对象转换成一个 Observable 对象，通过 message$ 属性将其暴露出来。这样 ReceiverComponent 组件就可以通过订阅这个 Observable 获取发送的数据。而 SenderComponent 组件则可以通过 changeMessage() 方法来发送新的数据。下面是两个组件的示例代码。
SenderComponent：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------------
--------- -------------
--------- -
------ --------------------- --
------- -------------------------------------
--
--
------ ----- --------------- -
------- - ---
------------------- ------------ ------------ --
------------- -
---------------------------------------------
------------ - ---
-
-在这个组件中，我们通过构造函数注入了 DataService。然后我们可以通过输入框来输入消息，通过按钮来发送消息。在 sendMessage() 方法中，我们使用 DataService 的 changeMessage() 方法来发送消息。
ReceiverComponent：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------------
--------- ---------------
--------- -
------------ -------- -- ------- -------
--
--
------ ----- ----------------- -
------- - ---
------------------- ------------ ------------ --
---------- -
------------------------------------------- -- -
------------ - --------
---
-
-在这个组件中，我们同样通过构造函数注入了 DataService。然后在 ngOnInit() 方法中，我们订阅了 DataService 的 message$ 属性来获取发送的消息。
到这里，就可以在 SenderComponent 和 ReceiverComponent 中进行数据传递了。只需要在 DataService 中维护一个共享的 Subject，然后让多个组件共享这个 Subject 就可以了。
结论
在 Angular2+ 中，使用 RxJS 的 Subject 可以很好的解决多个组件之间需要共享数据的问题。只需要在数据服务中创建一个 Subject 对象，然后暴露成 Observable，让多个组件共享这个 Observable 就可以了。使用这种方式可以避免组件之间直接进行数据传递，降低了组件之间的耦合度，也方便了对组件内部状态的管理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6705fb1ed91dce0dc8565927