前言
在前端开发中，经常使用到一种数据传递机制，即发布-订阅模式（Publish-Subscribe Pattern），它是一种对象间的一对多的观察关系，当一个对象（被观察者，或称为发布者）状态发生改变时，会通知多个观察者（订阅者），让他们自动更新。而使用 Angular 开发 Web 应用时，coolshare_angular_pub_sub 是一个很好的 npm 包，可以方便地实现发布-订阅模式，本文将对它的使用进行详细介绍。
安装
安装 coolshare_angular_pub_sub 很简单，只需要在命令行中执行以下命令即可：
--- ------- ------------------------- ------
使用方法
发布消息
要发布消息，需要引入 CoolSharePubSubService 服务。在要发布消息的组件中，可以这样引入：
------ - --------- - ---- ----------------
------ - ---------------------- - ---- ----------------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ------- ----------------------- - -
----------------- ---- -
------------------------------ ------- -----------
-
-上面的代码中，我们引入了 CoolSharePubSubService 服务，并在构造函数中注入该服务。在 publishMessage 方法中，通过 this.pubsub.publish 方法发布了一个名为 "message" 的消息，消息内容为 "Hello, Angular!"。
订阅消息
要订阅消息，也需要引入 CoolSharePubSubService 服务。在想要订阅消息的组件中，可以这样引入：
------ - ---------- ------ - ---- ----------------
------ - ---------------------- - ---- ----------------------------
------------
--------- -----------------
------------ ------------------------------
---------- ------------------------------
--
------ ----- ------------------- ---------- ------ -
-------- -------
------------------- ------- ----------------------- - -
----------- ---- -
-------------------------------- ------ ------- -- ------------ - ------
-
-上面的代码中，我们引入了 CoolSharePubSubService 服务，并在构造函数中注入该服务。在 ngOnInit 方法中，通过 this.pubsub.subscribe 方法订阅了一个名为 "message" 的消息，并指定了回调函数，该回调函数会在该消息被发布时被调用，收到订阅的消息后，将消息内容赋值给 this.message 属性。
取消订阅
如果想要取消已经订阅的消息，可以调用 CoolSharePubSubService 服务的 unsubscribe 方法。例如：
------ - ---------- ------ - ---- ----------------
------ - ---------------------- - ---- ----------------------------
------------
--------- -----------------
------------ ------------------------------
---------- ------------------------------
--
------ ----- ------------------- ---------- ------ -
-------- -------
------------- ----
------------------- ------- ----------------------- - -
----------- ---- -
----------------- - -------------------------------- ------ ------- -- ------------ - ------
-
-------------- ---- -
-------------------------------------------
-
-上面的代码中，我们在订阅消息时，将订阅对象保存到 this.subscription 属性中，当要取消订阅时，调用 this.pubsub.unsubscribe 方法并传入该订阅对象即可。
示例代码
完整的示例代码请见：https://github.com/coolshare/coolshare-angular-pub-sub-demo
总结
在 Angular 中，使用 coolshare_angular_pub_sub 可以很方便地实现发布-订阅模式，代码简洁明了，易于维护。希望本文能够对大家学习和实践 Angular 前端开发有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005575281e8991b448d44b7