前言
在前端开发中，经常会遇到组件之间需要进行通信的情况。而一个比较好用的方式就是使用发布订阅模式。如果你正在使用 Angular 框架进行开发，那么一个非常好用的 npm 包就是 angular-global-pubsub。该包可以让你在 Angular 应用中非常方便地进行组件之间的通信。本文将详细介绍该包的使用方法。
安装
在安装之前，你需要确认你的项目已经安装了 Angular。安装方式如下：
npm i @angular/cli -g ng new my-project cd my-project ng serve
如果以上步骤已经完成，则可以开始安装 angular-global-pubsub 了。命令如下：
npm install angular-global-pubsub
使用
初始化
在使用 angular-global-pubsub 之前，需要先在项目的入口处（例如 app.module.ts）进行初始化。在其中引入 PubSubModule 并添加到 imports 数组中，如下：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ------------ - ---- ------------------------
-----------
-------- -
--------------
------------
--
------------- - ------------ --
---------- - ------------ -
--
------ ----- --------- - -发布事件
现在，你可以在任何一个组件中发布一个事件了。假设你想在组件 A 中发布一个事件，你可以这样做：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- ------------------------
------------
--------- ------------------
--------- -
------- ---------------------------------
-
--
------ ----- ---------- -
------------------- ------- -------------- -
-
--------- -
---------------------------------------- ------- ---------
-
-在上面的代码中，我们通过 pubSub.publishEvent 方法发布了一个事件。该方法接收两个参数：事件名称（此处为 event-from-a）和事件内容（此处为 Hello, world!）。可以根据实际情况自行定义。
订阅事件
现在，在组件 B 中，你可以订阅事件了。例如，你想在组件 B 中订阅组件 A 发布的 event-from-a 事件，你可以这样做：
-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------ - ------------- - ---- ------------------------
------ - ------------ - ---- -------
------------
--------- ------------------
--------- -
----- ------- ------
-
--
------ ----- ---------- ---------- --------- -
-------- -------
------------- -------------
------------------- ------- -------------- -
----------------- - ------------------------------------------ --------- ------- -- -
------------ - --------
---
-
------------- -
--------------------------------
-
-在上面的代码中，我们通过 pubSub.subscribeEvent 方法订阅了事件。该方法接收两个参数：事件名称（此处为 event-from-a）和回调函数。回调函数接收订阅的事件的内容作为参数，我们在其中将其赋值到组件的 message 变量中。该 subscription 对象用于在组件销毁时取消订阅。
取消订阅
如果在组件的生命周期结束前需要取消订阅，你可以这样做：
-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------ - ------------- - ---- ------------------------
------ - ------------ - ---- -------
------------
--------- ------------------
--------- -
----- ------- ------
-
--
------ ----- ---------- ---------- --------- -
-------- -------
------------- -------------
------------------- ------- -------------- -
----------------- - ------------------------------------------ --------- ------- -- -
------------ - --------
---
-
------------- -
--------------------------------
-
------------- -
-------------------
-
-在上面的代码中，我们定义了一个 unsubscribe 方法，通过在其内部调用 this.subscription.unsubscribe() 来取消订阅。在组件销毁时我们也同样调用了该方法。
结语
本文介绍了 angular-global-pubsub 的使用方法，涵盖了初始化、发布事件、订阅事件和取消订阅等方面。希望该文章对你在 Angular 应用中进行组件之间通信有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/68951