介绍
在 Angular 中，$on 和 $broadcast 是两个重要的服务。它们用于允许不同组件之间进行通信。
$on 是一个监听函数，用于监听事件，并在事件发生时执行回调函数。$broadcast 则是用于在应用程序中广播事件以便其他组件能够收到通知。
这两个服务在 Angular 应用程序中被广泛使用。
$on
$on 用于注册事件监听器。当事件发生时，Angular 将会执行回调函数。下面是使用 $on 的示例代码：
$scope.$on('myEvent', function(event, data) {
console.log('Received data:', data);
});在上面的代码中，我们监听了名为 myEvent 的事件。当事件被触发时，我们将打印出事件所传递的数据。
$on 函数返回一个注销函数。调用该函数可以注销监听器。这很有用，因为如果您忘记了注销监听器，它可能会导致内存泄漏。
const deregister = $scope.$on('myEvent', function(event, data) {
console.log('Received data:', data);
});
deregister();$broadcast
$broadcast 用于向应用程序中所有子组件广播事件。子组件可以通过 $on 监听事件并处理它。以下是使用 $broadcast 的示例代码：
$scope.$broadcast('myEvent', { message: 'Hello, world!' });在上面的代码中，我们向应用程序中的所有子组件广播了名为 myEvent 的事件，并传递了一个包含消息的对象。
实际应用
$on 和 $broadcast 通常用于父子组件之间的通信。例如，当一个子组件需要告诉它的父组件一些东西时，可以使用 $broadcast。当父组件需要把数据传递给子组件时，可以使用 $on。
以下是一个示例应用程序，它演示了如何在父组件和子组件之间使用这两个服务进行通信：
-- -------------------- ---- -------
-- ---
------------
--------- -------------------
--------- -
---------- --------------
---------------- -------------------------------------------------------
-
--
------ ----- --------------- -
---------------------- ---- -
--------------------- ---- ---- -------- ------
-
-
-- ---
------------
--------- ------------------
--------- -
--------- --------------
------- ------------------------------- --------------
-
--
------ ----- -------------- -
--------- ------- - --- ---------------
----------- -
------------------- -------- ------- ------- ---
-
-在上面的示例中，子组件定义了一个名为 myEvent 的事件，当点击按钮时会触发该事件。父组件通过在模板中使用 (myEvent) 进行监听，当子组件触发该事件时，父组件的 handleChildEvent 方法将被调用。
结论
$on 和 $broadcast 在 Angular 中是非常有用的服务。它们允许不同组件之间进行通信，从而使组件之间的协作更加轻松。当您需要在组件之间共享数据或信息时，请考虑使用它们。同时，记得注销监听器以避免内存泄漏。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25026