角度中的 onchange 事件

在 Angular 中，onchange 事件是一个非常常用的事件，它通常用于监听一个表单控件的变化，例如输入框、下拉框、单选框等。当用户对这些表单控件进行修改时，onchange 事件就会被触发，我们可以在事件处理函数中获取到用户的输入值并进行相应的处理。

基本用法

在 Angular 中，我们可以通过在表单控件上绑定 [(ngModel)] 指令来捕获输入变化，然后在组件类中定义一个对应的 onChange 事件来处理输入变化：

<input type="text" [(ngModel)]="inputValue" (change)="onChange($event)">

export class MyComponent {
  public inputValue: string;
  onChange(event: any) {
    this.inputValue = event.target.value;
    console.log('Input value changed:', this.inputValue);
  }
}

在上述代码中，inputValue 是我们绑定到输入框上的数据模型变量，当用户输入文本时，ngModel 指令会自动更新这个变量的值。同时，我们也定义了一个 onChange 事件处理函数，当输入框的值被修改时，这个事件就会被触发，我们在事件处理函数中获取到用户输入的值，并将其打印到控制台中。

需要注意的是，由于 onchnage 事件只有在输入框失去焦点的时候才会被触发，因此如果需要实时监听输入内容的变化，我们需要使用另一个事件 oninput。

处理多个输入控件

在真实的应用场景中，我们可能会有多个输入控件需要进行处理，此时我们可以将 onChange 函数进行封装，通过使用 switch 语句来区分不同的输入控件：

<input type="text" [(ngModel)]="input1" (change)="onChange($event.target.name, $event.target.value)">
<input type="text" [(ngModel)]="input2" (change)="onChange($event.target.name, $event.target.value)">

export class MyComponent {
  public input1: string;
  public input2: string;
  onChange(name: string, value: string) {
    switch (name) {
      case 'input1':
        console.log('Input 1 value changed:', value);
        break;
      case 'input2':
        console.log('Input 2 value changed:', value);
        break;
      default:
        break;
    }
  }
}

在上述代码中，我们使用了 target.name 和 target.value 属性来获取当前触发事件的元素的名称和值，然后将其作为参数传递给 onChange 函数。在 onChange 函数中，我们使用了 switch 语句来判断当前输入控件的名称，并根据不同的名称来进行对应的处理。

总结

Angular 中的 onchange 事件是一个非常重要的事件，它可以帮助我们实时监听输入控件的变化，并及时更新数据模型，从而实现输入值的双向数据绑定。同时，我们还可以通过封装事件处理函数来处理多个输入控件，让代码更加简洁优雅。