在现代的前端应用程序中，组件化已成为一种非常重要的方式。当我们的应用程序通过传统方式变得越来越庞大时，我们需要一种方法来让不同的组件之间进行交互。在 Angular 应用程序中，我们可以使用一个叫做 ng-pub-sub 的npm 包来实现这样的目的。本文将介绍如何使用 ng-pub-sub 包来实现组件间通信的功能。
安装和配置
首先我们需要安装 ng-pub-sub 包。在终端运行以下命令：
npm install ng-pub-sub --save
之后，将 ng-pub-sub 模块引入应用程序的根模块中：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - -------------- - ---- -------------
-----------
-------- -
--------------
-
--
------ ----- --------- - -发布和订阅事件
使用 ng-pub-sub 包非常方便。要发布事件，只需调用 this.pubsub.emit(eventName, data) 即可。这个方法接受两个参数，一个是事件名称，一个是事件所需的数据，例如:
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------- - ---- -------------
------------
--------- ---------------
--------- -
------- ---------------------------- ----------------
-
--
------ ----- ----------- -
------------------- ------- ---------------- --
------------- -
------------------------------- - -------- ------ ------- ---
-
-要订阅事件，可以调用 this.pubsub.on(eventName, callback)。这个方法需要两个参数，一个是事件名称，一个是当事件触发时要执行的回调方法。例如:
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------- - ---- -------------
------------
--------- ------------------
--------- -
------- ------- --------
-
--
------ ----- -------------- -
-------- ------ - ---
------------------- ------- ---------------- --
---------- -
----------------------------- ---- -- -
------------ - -------------
---
-
-示例
接下来我们来看一个完整的示例。在这个示例中，我们将使用两个组件来模拟组件之间的通信。首先是发送组件，它包含一个输入框和一个按钮。当用户输入框中输入文本并点击按钮时，将向订阅了消息的接收组件发送一个事件。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------- - ---- -------------
------------
--------- -------------
--------- -
------ ----------- ----------------------
------- ---------------------------- ----------------
-
--
------ ----- --------------- -
-------- ------ - ---
------------------- ------- ---------------- --
------------- -
------------------------------- - -------- ------------ ---
-
-接下来是接收组件，它首先定义了一个 message 变量，用来保存接收到的消息，然后在被创建后会订阅事件。当事件被触发时，设置 message 变量，并在模板中显示出来。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------- - ---- -------------
------------
--------- ---------------
--------- -
---- ------------------------ -------- -- ------- --------
-
--
------ ----- ----------------- -
-------- ------ - ---
------------------- ------- ---------------- --
---------- -
----------------------------- ---- -- -
------------ - -------------
---
-
-最后，我们将这两个组件添加到应用程序的根组件中。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
-------------------------
----
-----------------------------
-
--
------ ----- ------------ --现在，如果您启动这个应用程序并在发送组件中输入一些文本并点击“发送消息”按钮，则会在接收组件中显示此消息。
总结
ng-pub-sub 是一个非常方便的 npm 包，可以帮助我们实现 Angular 应用程序中组件间通信的目的。在本文中，我们了解了如何使用 ng-pub-sub 包来发布和订阅事件，以及如何在应用程序中使用它。我希望这篇文章可以帮助您更好地管理和组织您的 Angular 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb481e8991b448dc5ba