(change) 与 (ngModelChange) 在 Angular 中：2024 年该如何选择？

引言：为什么这个话题在 Stack Overflow 上如此火爆？

\n\n

如果你曾经用 Angular 开发过，并且处理过 <input> 中的变化，你很可能见过两个相似的事件：(change) 和 (ngModelChange)。乍一看，它们似乎是一样的。但实际上，魔鬼藏在细节中。"(change) vs (ngModelChange) in Angular" 这个问题在 Stack Overflow 上获得了成千上万的浏览量，这并非偶然：错误的选择会导致 bug、多余的服务器请求以及无数个不眠之夜。

\n\n

在 PythonLib 的这篇文章中，我们将一劳永逸地弄清楚：

\n

\n
• Angular 中的 (change) 和 (ngModelChange) 有何区别？
\n
• 何时使用它们？
\n
• 如何避免常见的陷阱？
\n

\n

让我们开始吧！🚀

\n\n

简要说明：什么是 (change) 和 (ngModelChange)？

\n\n

(change) 是一个标准的 DOM 事件，当元素失去焦点 (blur) 且其值发生变化时触发。Angular 只是简单地包装了原生的 change 事件。

\n\n

(ngModelChange) 是 ngModel 指令的一个事件。它在模型每次发生变化时触发——实际上，每次按键都会触发（如果没有使用 ngModelOptions 的话）。

\n\n

重要提示：ngModelChange 不能脱离 [(ngModel)] 使用。它是双向绑定的一部分。

\n\n

以下是一个用 TypeScript 编写的最小示例，用于展示它们的区别：

\n\n

// app.component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    <input\n      [ngModel]="name"\n      (ngModelChange)="onNgModelChange($event)"\n      (change)="onChange($event)"\n      placeholder="请输入姓名">\n    <p>值: {{ name }}</p>\n  `\n})\nexport class AppComponent {\n  name = '';\n\n  onNgModelChange(value: string) {\n    console.log('ngModelChange:', value);\n  }\n\n  onChange(event: Event) {\n    console.log('change:', (event.target as HTMLInputElement).value);\n  }\n}\n

\n\n

尝试输入 "Angular" —— 你会看到：ngModelChange 会触发 7 次（每输入一个字母一次），而 change 只会在你点击输入框外部时触发一次。

\n\n

主要区别：对比表格

\n\n

为了更直观，以下是 (change) vs (ngModelChange) 的关键区别表格：

\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

标准	(change)	(ngModelChange)
事件类型	原生 DOM 事件	Angular 事件 (EventEmitter)
触发时机	失去焦点且值发生变化时	模型每次变化时（每次输入）
$event 中的值	Event 对象（需要提取 value）	模型的新值（字符串、数字等）
对 ngModel 的依赖	不需要（可用于任何 input）	需要 [(ngModel)] 或 [ngModel]
性能	高（触发频率低）	可能频繁（每次按键触发）
与表单的配合使用	响应式表单、模板驱动表单	仅限模板驱动表单

\n\n

何时使用 (change)？

\n\n

(change) 是你的选择，如果：

\n

\n
• 你只需要在字段