Angular 是一款流行的前端框架，它的事件机制是其重要的特性之一。了解 Angular 的事件机制可以帮助我们更好地理解其工作原理，调试代码并快速解决问题。在本文中，我们将深入探讨 Angular 的事件机制，覆盖从基础知识到常见应用。
事件基础知识
事件是指用户在应用程序或网页上执行的某些操作，例如点击、滚动、键盘敲击等。在 Angular 中，事件是指响应这些操作的机制。
Angular 中的事件模型基于订阅者模式。一个组件或指令可以发布一个事件，而一个或多个订阅者可以订阅并接收该事件。事件可以包含数据，用于向订阅者传递信息。
事件发布和订阅
在 Angular 中，发布者和订阅者之间通过事件广播器进行通信。该广播器是由 @Output 装饰器注解的属性创建的。例如：
-- -------------------- ---- -------
------ - ---------- ------------- ------ - ---- ----------------
------------
--------- ---------------
--------- -
------- ------------------------------- ------------
-
--
------ ----- ----------- -
--------- ------- - --- ---------------
--------------- -
------------------------- ---------
-
-在上述示例中，MyComponent 类中声明了一个带有 @Output 装饰器的属性 myEvent，并在 onButtonClick() 方法中使用 emit() 方法发布该事件。该组件的模板中有一个按钮元素，并在其 (click) 事件处理函数内调用了 onButtonClick() 方法。这意味着在点击按钮时，事件广播器将发布 myEvent 事件。
现在，让我们创建一个订阅者来接收 myEvent：
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------------
--------- ----------------
--------- -
----------------------
-
--
------ ----- ------------ -
-------- -------- -------
-在上述示例中，MySubscriber 类包含一个带有 @Input 装饰器的属性 message，该属性用于接收 myEvent 中传递的信息。我们可以将 MySubscriber 添加到 MyComponent 的模板中：
-- -------------------- ---- -------
------------
--------- ---------------
--------- -
------- ------------------------------- ------------
-------------- --------------------------------------
-
--
------ ----- ----------- -
---------- ------ - ---
--------- ------- - --- ---------------
--------------- -
-------------- - ------- --------
----------------------------------
-
-在上述示例中，我们添加了一个 MySubscriber 实例，并将 myMessage 作为输入属性传递给它。在 onButtonClick() 方法中，我们设置了属性 myMessage 的值，并将该值与 myEvent 事件一起发布。这意味着在点击按钮时，MySubscriber 将接收到 Hello, world!。
使用 RxJS
RxJS 是一个强大的反应式编程库，可以将异步事件作为数据流进行处理。Angular 使用 RxJS 来处理事件，并提供了 Observable 类型。Observable 在事件发布者和订阅者之间进行单向数据流通信。它可以随时发射新的值，并允许订阅者在每个新值到达时执行自定义逻辑。
例如，假设我们有一个服务，它提供了一个返回数字的方法。我们可以使用 RxJS 来创建一个可观察对象并将该方法连接到其数据流：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -------
-------------
----------- ------
--
------ ----- ------------- -
---------------------- ------------------ -
------ --- ----------------------------- -- -
-------------- -- -
----- ------------ - ------------------------ - ---- - --
----------------------------
-- ------
---
-
-在上述示例中，我们创建了一个名为 getNumberObservable() 的方法，该方法返回一个 Observable，该 Observable 在每秒钟发出一个 1 至 100 之间的随机整数。
现在，我们可以在组件中订阅 getNumberObservable() 并在每次收到新值时更新组件的状态：
-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------ - ------------- - ---- -------------------
------ - ------------ - ---- -------
------------
--------- ---------------
--------- -
-----
--- ------ -- -----------------
------
-
--
------ ----- ----------- ---------- --------- -
-------------- -------
------------- -------------
------------------- -------- -------------- -------------- -
----------------- - --------------------------------------------------------- -- -
------------------ - ----------
---
-
------------- -
--------------------------------
-
-在上述示例中，我们添加了一个名为 currentNumber 的属性，该属性保存当前的数字。我们使用 ngOnDestroy() 方法取消订阅以避免内存泄漏。
Angular 的内置事件
Angular 提供了一些内置事件，可以用来处理用户的操作。
Click 事件
Click 事件是最常见的事件之一。它在用户单击一个元素时触发。我们可以像这样在模板中使用它：
<button (click)="onButtonClick()">Click me!</button>
Keyboard 事件
键盘事件通常用于捕捉键盘上的按钮，例如 Enter 键或 Esc 键。我们可以使用 keydown、keyup 或 keypress 事件来处理这些操作。例如：
<input type="text" (keyup.enter)="onEnterKeyPressed()">
在上述示例中，onEnterKeyPressed() 方法将在用户按下 Enter 键时被调用。
Mouse 事件
鼠标事件通常用于捕捉与鼠标相关的操作。Angular 提供了许多鼠标事件，例如 mousedown、mouseup、mousemove 等。例如：
<div (mouseover)="onMouseOver()">Mouse over me!</div>
在上述示例中，onMouseOver() 方法将在用户将鼠标悬停在 div 元素上时被调用。
Form 事件
表单事件用于处理与表单相关的操作，例如提交、重置等。Angular 提供了许多表单事件，例如 submit、reset 等。在模板中使用它们的方式与其他事件相同。例如：
<form (submit)="onFormSubmitted($event)"> <input type="text" name="username"> <button type="submit">Submit</button> </form>
在上述示例中，onFormSubmitted() 方法将在用户提交表单时被调用。注意，我们使用 $event 对象将表单事件传递给方法，以便在处理表单数据时进行访问。
结论
Angular 的事件机制是其核心特性之一。在本文中，我们详细介绍了其中的基础知识和常见应用，涉及了事件发布和订阅、RxJS、内置事件等方面。我希望这篇文章可以帮助你更好地了解 Angular 的事件机制，并在开发过程中运用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670754d8d91dce0dc866cbe1