Angular学习之生命周期

一、Angular生命周期

在学习Angular之前，需要了解Angular的生命周期。Angular应用程序通过一组可预测的阶段运行。在这些阶段中，Angular会创建组件、渲染视图并最终销毁它们。每个组件都有一个生命周期，它由一些生命周期钩子组成。这些生命钩子在组件生命周期的特定时期触发。

Angular的生命周期钩子可以分为四个阶段：

创建：创建组件、指令或服务实例

更新：组件或指令的属性发生变化

检查：在组件或指令上进行变化检测

销毁：销毁组件、指令或服务实例

二、创建阶段

1. ngOnChanges

当组件或指令的数据绑定输入属性发生变化时，ngOnChanges生命周期钩子就会被触发。在ngOnChanges期间，您可以访问新值和旧值，以及有关属性的当前和先前状态的元数据信息。这是一个有用的钩子，因为它使您能够在响应输入属性值的变化时执行适当的操作。

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
@Component({
  selector: 'app-child',
  template: `
  `,
})
export class TimerComponent implements OnDestroy {
  countdown = 10;
  private intervalId: number;
  constructor() {
    this.intervalId = setInterval(() => {
      this.countdown--;
      if (this.countdown === 0) {
        clearInterval(this.intervalId);
      }
    }, 1000);
  }
  ngOnDestroy(): void {
    clearInterval(this.intervalId);
  }
}

在此示例中，当计时器组件被销毁时，ngOnDestroy钩子会清除计时器中使用的任何资源。