一、Angular生命周期

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

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

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

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

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

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

二、创建阶段

1. ngOnChanges

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

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

@Component({
  selector: 'app-child',
  template: `
Hello {{name}}!
`,

})
export class ChildComponent implements OnChanges {
  @Input() name: string;
  ngOnChanges(changes: SimpleChanges): void {
    for (const propName in changes) {
      const change = changes[propName];
      const current = JSON.stringify(change.currentValue);
      const previous = JSON.stringify(change.previousValue);
      console.log(`${propName}: currentValue = ${current}, previousValue = ${previous}`);
    }
  }
}
@Component({
  selector: 'app-parent',
  template: ``,
})
export class ParentComponent {
  name = 'Angular';
  updateName(): void {
    this.name = 'Angular ' + Math.random();
  }
}

当调用updateName方法时，父组件的name属性将随机更改。当更改发生时，ngOnChanges生命周期钩子会捕获新值和旧值，然后在控制台中记录它们。例如：

name currentValue = "Angular 0.6844029681339693", previousValue = "Angular 0.3533844746648535"

2. ngOnInit

ngOnInit是组件生命周期钩子中最常用的一个。它会在组件初始化完成后立即触发。在ngOnInit之后，Angular会触发其他创建阶段的生命周期钩子，以便将组件完全初始化。例如，ngOnInit执行以下任务：

在真实 DOM 中创建组件。

初始化组件的属性。

调用服务以加载数据。

当您想要在组件初始化期间执行一些初始化操作时，ngOnInit就会很有用。例如，您可以加载数据并在组件中显示它：

import { Component, OnInit } from '@angular/core';

import { DataService } from './data.service';
@Component({
  selector: 'app-root',
  template: `
    
Data: {{data}}

  `,
})
export class AppComponent implements OnInit {
  data: string;
  constructor(private dataService: DataService) {}
  ngOnInit(): void {
    this.getData();
  }
  getData(): void {
    this.dataService.getData().subscribe((data) => (this.data = data));
  }
}

三、更新阶段

1. ngDoCheck

每次更改检测都会触发ngDoCheck。ngDoCheck用于检测组件中的属性或嵌套组件中的属性的任何更改。例如，如果您正在编写一个聊天应用程序，有一个用户列表，并且一个用户添加或删除，您可以使用ngDoCheck刷新用户列表。

import { Component, Input, DoCheck } from '@angular/core';

import { User } from './user.model';
@Component({
  selector: 'app-user-list',
  template: `
    
User list

    

      {{ user.name }}
    

  `,
})
export class UserListComponent implements DoCheck {
  @Input() users: User[];
  previousUsers: User[];
  ngDoCheck(): void {
    if (this.users !== this.previousUsers) {
      this.previousUsers = this.users;
      console.log('User list updated');
    }
  }
}

当将新的用户数组传递给UserListComponent时，ngDoCheck将会捕捉到更改，认为UserListComponent的用户列表已更新。

四、销毁阶段

1. ngOnDestroy

当Angular销毁组件或指令时，ngOnDestroy生命周期钩子就会被触发。在此期间，您可以清理组件或指令中使用的任何资源，例如订阅或定时器。

import { Component, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-timer',
  template: `
    
{{countdown}}

  `,
})
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钩子会清除计时器中使用的任何资源。