六、生命周期

1. 创建阶段

• constructor: 组件类实例化时调用，用于依赖注入和变量初始化
• ngOnChanges: 输入属性首次设置或发生变化时调用
• ngOnInit: 第一次ngOnChanges之后调用，用于组件初始化

2. 变更检测阶段

• ngDoCheck: 每次变更检测周期中调用，用于实现自定义变更检测逻辑

3. 内容投影阶段(vu中的插槽)

• ngAfterContentInit: 组件内容投影初始化完成后调用
• ngAfterContentChecked: 每次检查投影内容后调用

4. 视图渲染阶段

• ngAfterViewInit: 组件视图及其子视图初始化完成后调用
• ngAfterViewChecked: 每次检查组件视图及其子视图后调用

5. 销毁阶段

• ngOnDestroy: 组件销毁前调用，用于清理资源和取消订阅

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

@Component({
  selector: 'app-example',
  template: `<p>Example component: {{name}}</p>`
})
export class ExampleComponent implements OnChanges, OnInit, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy {
  @Input() name: string;

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

  ngOnChanges(changes: SimpleChanges) {
    console.log('ngOnChanges called', changes);
  }

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

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

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

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

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

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

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