angular-lifecyle-ngonchanges

Introduction

ngOnChanges是Angular中非常重要的一个生命周期函数，今天我们来详细讨论一下它的用法。

Angular什么时候调用ngOnChanges？

ngOnChanges是一个生命周期钩子，当Angular检测到组件的输入属性发生变化时，就会调用ngOnChanges函数。这意味着，只有当组件的输入属性发生变化时，ngOnChanges才会被调用。

我们什么时候需要重写ngOnChanges？

通常情况下，我们不需要重写ngOnChanges函数，因为Angular会自动调用它。但是，以下几种情况都需要重写ngOnChanges函数：

1. 当我们使用了OnPush时，且需要根据Input变化做相应操作时，那么就要响应ngOnChanges。
2. 当我们需要在组件的输入属性发生变化时执行一些自定义逻辑时，我们就需要重写ngOnChanges函数。

配合OnPush

假设有一个父组件：ParentComponent，一个子组件ChildComponent，父组件中调用一个API，返回值作为Input传递给子组件，子组件要根据这个Input继续调用另外一个API，这时候就需要在子组件中重写ngOnChanges函数。

@Component({
  selector: 'app-child',
  standalone: true,
  imports: [],
  template: `
    <p>Child Component</p>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class ChildComponent implements OnChanges {
  @Input() data: any;

  ngOnChanges(changes: SimpleChanges) {
    if (changes.data) {
      this.fetchData();
    }
  }

  fetchData() {
    // Call API
  }
}

自定义逻辑