角度 onChange onChanges SimpleChanges

在 Angular 中，当组件的某个输入属性发生改变时，我们可以使用下列几种方式来监听这个变化：

1. 角度 @Input() 装饰器

我们可以很容易地在组件中引入 @Input() 装饰器，并将一个输入属性绑定到该属性上。当父组件改变该属性时，组件将自动更新。

@Input() myInput: string;

2. 角度 onChanges 生命周期

onChanges 生命周期钩子适用于当我们需要检测多个输入属性的改变时。我们需要引入 OnChanges 接口，实现 ngOnChanges 函数，然后在其中处理输入属性的改变。

import { Component, OnChanges, SimpleChanges } from "@angular/core";

@Component({
  selector: "app-my-component",
  template: `{{ myInput }}`
})
export class MyComponent implements OnChanges {
  @Input() myInput: string;

  ngOnChanges(changes: SimpleChanges) {
    for (const propName in changes) {
      if (Object.prototype.hasOwnProperty.call(changes, propName)) {
        const change = changes[propName];
        const from = JSON.stringify(change.previousValue);
        const to = JSON.stringify(change.currentValue);
        console.log(`${propName} changed from ${from} to ${to}`);
      }
    }
  }
}

3. 角度 onChange 事件绑定

当我们需要在用户输入改变时及时响应时，我们可以使用 onChange 事件绑定。我们可以在 HTML 中引入 (ngModelChange) 事件，绑定到组件的一个函数上。

<input [(ngModel)]="name" (ngModelChange)="onChange($event)" />

<!-- 也可以简写为：-->

<input [(ngModel)]="name" (change)="onChange($event.target.value)" />

onChange(newValue: string) {
  console.log(`name changed to ${newValue}`);
}

总结：不管我们在什么情况下监听输入属性的改变，我们都可以通过 onChange 事件、onChanges 生命周期以及 @Input() 装饰器来绑定输入属性并监听其变化。我们只需选择适合自己的方式即可。