Angular 中的 change 和 ngModelChange 有什么区别？

在 Angular 中，change 和 ngModelChange 都是触发表单输入框绑定事件的方式。然而，它们之间有一些重要的区别。

change 事件

change 事件是 HTML 原生的事件，它在用户修改 input 或 select 等元素后触发。在 Angular 中，我们可以通过 (change) 语法来绑定这个事件。

<input type="text" (change)="onChange($event)" />

当用户在 input 中输入内容并点击其他元素时，change 事件会触发。这意味着当用户在表单输入框中输入内容时，change 事件并不会立即触发。

ngModelChange 事件

ngModelChange 事件是 Angular 提供的一个自定义事件，它在表单输入框的值发生变化时触发。同样地，我们可以通过 (ngModelChange) 语法来绑定这个事件。

<input type="text" [(ngModel)]="name" (ngModelChange)="onNameChange()" />

当用户在 input 中输入内容时，ngModelChange 事件会立即触发。这意味着我们可以立即更新用户输入的值，而不必等待用户点击其他元素。

区别

总的来说，ngModelChange 事件更加实用，因为它可以立即响应表单输入框中的值变化。而 change 事件则需要等待用户离开输入框后才会触发。

此外，当表单输入框绑定了 ngModel 时，即使我们不显式地绑定 change 事件，ngModelChange 事件也会自动触发。

结论

在 Angular 中，我们应该优先使用 ngModelChange 事件，因为它更加实用。当我们需要处理用户输入时，我们可以立即响应表单输入框中的值变化，而不用等待用户点击其他元素。