angular中的生命周期钩子都有哪些， 都是怎么用的？

Angular 中的生命周期钩子共有八个，它们的作用不同，可以在组件实例创建、更新和销毁时执行一些任务。具体如下：

1. ngOnChanges: 当输入属性（@Input）发生变化时被调用。可以通过该钩子对新值和旧值进行比较，以确定是否需要重新计算或更新组件状态。

2. ngOnInit: 在组件初始化之后被调用，通常用于执行一些初始化操作，例如从服务器获取数据等。

3. ngDoCheck: 检测并响应组件属性或视图的变化，可以手动触发变化检测机制。

4. ngAfterContentInit: 在组件内容投影完成之后被调用，可以访问子组件或指令的属性。

5. ngAfterContentChecked: 检测并响应组件内容投影的变化，可以手动触发变化检测机制。

6. ngAfterViewInit: 在组件视图初始化之后被调用，可以访问 DOM 元素。

7. ngAfterViewChecked: 检测并响应组件视图的变化，可以手动触发变化检测机制。

8. ngOnDestroy: 在组件销毁之前被调用，通常用于释放资源、取消订阅、清除定时器等操作以

下是一个简单的例子，展示了这些生命周期钩子的使用场景

import { Component, Input, OnChanges, OnInit, DoCheck, AfterContentInit, 
AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-lifecycle-example',
  template: '<p>{{message}}</p>'
})
export class LifecycleExampleComponent implements OnChanges, OnInit, DoCheck, 
AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy {

  @Input() message: string;

  constructor() {
    console.log('constructor');
  }

  ngOnChanges() {
    console.log('ngOnChanges');
  }

  ngOnInit() {
    console.log('ngOnInit');
  }

  ngDoCheck() {
    console.log('ngDoCheck');
  }

  ngAfterContentInit() {
    console.log('ngAfterContentInit');
  }

  ngAfterContentChecked() {
    console.log('ngAfterContentChecked');
  }

  ngAfterViewInit() {
    console.log('ngAfterViewInit');
  }

  ngAfterViewChecked() {
    console.log('ngAfterViewChecked');
  }

  ngOnDestroy() {
    console.log('ngOnDestroy');
  }
}

 

在这个例子中，我们创建了一个组件 LifecycleExampleComponent，并实现了所有生命周期钩子函数。当组件被创建和销毁时，这些钩子函数将会按照特定的顺序被调用。

例如，我们在 AppComponent 中使用该组件：

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

@Component({
  selector: 'app-root',
  template: '<app-lifecycle-example [message]="message"></app-lifecycle-example>'
})
export class AppComponent {

  message = 'Hello World!';

  constructor() {
    setTimeout(() => { this.message = 'Hello Angular!'; }, 2000); // change the input after 2 seconds
  }
}

在这个例子中，当 AppComponent 创建时，它会创建 LifecycleExampleComponent，并将 message 属性传递给它。当应用程序运行时，将按照以下顺序调用生命周期钩子函数：

1. constructor
2. ngOnChanges (因为输入属性发生了变化)
3. ngOnInit
4. ngDoCheck
5. ngAfterContentInit
6. ngAfterContentChecked
7. ngAfterViewInit
8. ngAfterViewChecked

2 秒后，由于 AppComponent 中的 message 属性发生了变化，将再次按照以下顺序调用生命周期钩子函数：

1. ngOnChanges
2. ngDoCheck
3. ngAfterContentChecked
4. ngAfterViewChecked

当 AppComponent 销毁时，将调用 ngOnDestroy。

这个例子只是简单地展示了 Angular 生命周期钩子的使用方式和场景，实际上它们可以