在前端开发中，很多时候不同组件或模块之间需要进行数据交互，而通过传递参数或 props 等方式实现通信可能并不是非常方便或直观。因此，在这种情况下，我们可以使用订阅-发布模式来完成组件之间的数据通信。ngx-pubsub 就是一个非常实用的订阅-发布库，可在 Angular 项目中实现消息通信。
什么是 ngx-pubsub？
ngx-pubsub 是一个基于 RxJS 实现的订阅-发布库，专为 Angular 开发者提供。它可以帮助前端开发者在不同组件和模块之间实现事件的发布与订阅，非常方便和易用。
如何使用 ngx-pubsub？
使用 ngx-pubsub 比较简单，只需要按照以下步骤完成即可。
引入依赖
首先，在项目中安装 ngx-pubsub 库，可以通过以下命令安装：
npm install ngx-pubsub --save
然后在需要使用的模块中引入：
import { NgxPubSubService } from 'ngx-pubsub';发布事件
在需要发布消息的组件中，我们可以通过 NgxPubSubService 的 publish 方法发布消息，如下所示：
import { NgxPubSubService } from 'ngx-pubsub';
constructor(private pubsubService: NgxPubSubService) {}
sendMessage() {
this.pubsubService.publish('my-topic', 'hello world');
}这样就可以发布一个名为 "my-topic" 的事件，并将消息 "hello world" 传输给订阅组件。
订阅事件
在需要接收消息的组件中，我们可以使用 NgxPubSubService 的 subscribe 方法来订阅事件，并且在组件注销时取消订阅，如下所示：
-- -------------------- ---- -------
------ - ----------------- ------------------- - ---- -------------
-------------------- ------------------- - --- ----------------------
------------------- -------------- ----------------- -
-----------------------------
---------------------------------------- --------- -- -
---------------------
--
--
-
------------- -
------------------------------------------
-这样就可以在组件销毁时自动取消订阅。其中，"my-topic" 为要订阅的事件名称，(message) => { console.log(message); } 则为接收到事件后的回调函数。
实际应用示例
在实际开发中，有时候需要实现两个组件之间的双向数据绑定，而这时候可以使用 ngx-pubsub 库来完成。下面就来举一个简单的例子。
在一个 Angular 项目中，假设有两个组件 ComponentA 和 ComponentB，需要实现它们之间的双向数据绑定。具体做法如下：
ComponentA 中发布事件
首先，在 ComponentA 组件中使用 NgxPubSubService 的 publish 方法发布事件，将 ComponentA 中的数据发送给 ComponentB，示例如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- -------------
------------
--------- ------------------
--------- -
------ --------------------- ------------------------------- --
--
--
------ ----- ---------- -
-------- ------ - ---
------------------- -------------- ----------------- --
------------- -
------------------------------------- --------------
-
-注意，此处我们使用了 [(ngModel)] 绑定，表示 ComponentA 中的 message 和 input 框双向绑定。同时，当 message 发生变化时，我们会调用 sendMessage() 方法，将最新的值发布到 "message" 主题中。
ComponentB 中订阅事件
然后，在 ComponentB 组件中使用 NgxPubSubService 的 subscribe 方法订阅 ComponentA 发布的事件，并且将其显示在 ComponentB 中，示例如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- -------------
------ - ------------------- - ---- -------------
------------
--------- ------------------
--------- -
------- ------- --------
--
--
------ ----- ---------- -
-------- ------ - ---
-------------------- ------------------- - --- ----------------------
------------------- -------------- ----------------- -
-----------------------------
--------------------------------------- --------- -- -
------------ - --------
--
--
-
------------- -
------------------------------------------
-
-注意，在订阅事件 "message" 的回调中，我们将接收到的消息赋值给了 ComponentB 组件的 message 属性，然后在 template 中通过 {{ message }} 将其显示出来。同时，我们还在组件销毁时取消了订阅。
这样，就完成了两个组件间的双向数据绑定。
总结
ngx-pubsub 是一个非常实用的订阅-发布库，使用起来非常简单和直观。通过发布-订阅模式，我们可以很方便地实现组件之间的数据传递与通信。通过本文的介绍和示例，相信你已经可以掌握 ngx-pubsub 的基本用法，愿我们开发更加便捷。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663c81e8991b448e23bd