Angular 生命周期

        Angular 提供了一系列生命周期钩子函数，让开发者能够方便地控制组件的行为和状态。 Angular 组件的生命周期函数如下： 

1. ngOnChanges：当组件输入属性发生变化时调用，常用于处理一些需要响应组件输入属性变化的逻辑。 
2. ngOnInit：当组件初始化完成，且组件的输入属性已经传入时调用，通常用于初始化一些需要在组件初始化时完成的逻辑。 
3. ngDoCheck：当组件执行变更检测机制时调用，可以通过它来手动触发组件的变更检测和更新。 
4. ngAfterContentInit：当组件被投影内容初始化完成时调用，它的功能和 `ngOnInit` 类似，但它是在组件初始化完成后再去初始化投影内容。 
5. ngAfterContentChecked：当组件投影内容发生变化时调用，可以用来检查投影内容中的变化，并进行一些处理操作。 
6. ngAfterViewInit：当组件及其子组件视图初始化完成后调用，通常用于初始化一些跟视图相关的功能，比如添加一些 DOM 元素等等。其中内容投影是组件视图的一部分的。
7. ngAfterViewChecked：当组件及其子组件视图发生变化时调用，可以用来检查视图中的变化，并进行一些处理操作。
8. ngOnDestroy：当组件被销毁时调用，通常用于取消一些订阅或者清理一些数据。 

        以下是一个基本的组件示例，展示了如何使用这些生命周期方法，书写的顺序即为生命周期先后运行的顺序：

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

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello {{name}}!</h1>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnChanges, OnInit, DoCheck, 
    AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy {
  
  @Input() name: string;

  ngOnChanges(changes: SimpleChanges) {
    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');
  }
}

注意：

1. constructor：构造函数是一个 TypeScript 中的类的特殊方法，用于创建类的实例并进行一些初始化操作。在 Angular 中，constructor 方法会在组件实例化时被调用，但在 Angular 的生命周期钩子函数执行之前。它常用于注入依赖项和初始化私有变量。

2. ngOninit()方法是要在接收到@Input输入的属性值的同时执行，而ngOnChange()方法是在检测到@Input输入值有改变的时候会执行。即@Input --->ngOnChange()--->ngOnInit()

3. ngOnChange()方法会在输入属性发生变化时触发，初始化时也会触发一次，接受一个SimpleChange的参数，参数中保存了所有修改的属性的信息，没有被修改将不会被记录。其中基本数据类型和引用数据类型的引用地址发生改变才会触发，但引用类型中的属性变化不会触发。同时，初始化的SimpleChange的firstChange的属性输出是true,之后的修改触发输出的firstChange是false。

4. ngAfterViewChecked：因为页面内容投影也是视图的一部分，所以当页面任何内容发生改变的时候，都会触发ngAfterViewChecked()方法。比如当dropdown的值发生变化时，会导致组件的变更检测机制被触发，从而会引发ngAfterViewChecked()方法。所以考虑到性能方面，我们可以设置标志来控制它运行的次数，比如下面控制它只运行一次：

   export class YourComponent implements AfterViewChecked {
     private hasRun: boolean = false;
   
     ngAfterViewChecked() {
       if (!this.hasRun) {
         // 执行你想要运行的代码
         console.log('ngAfterViewChecked()执行了');
         // 设置标志为true，表示已经执行过了
         this.hasRun = true;
       }
     }
   }