angular知识点--生命周期钩子（ngAfterContentInit、ngAfterContentChecked、ngOnDestroy）

碎碎念：知识点梳理归纳，如果有什么不对的感谢大家指正一起学习！

ngAfterContentInit

1. 在组件使用<ng-content>将外部内容嵌入到组件视图后就会调用ngAfterContentInit,它在第一次ngDoCheck执行后调用，且只执行一次
2. 可以在该钩子，改变视图内容。例：变量初始化

ngAftercontentChecked

1. 在组件使用了<ng-content>自定义内容的情况下，angular在这些外部内容嵌入到组件视图后，或者每次变换监测的时候都会调用ngAfterContentChecked

---

content钩子实例（观察钩子调用顺序）

在上篇‘组件内容嵌入’的基础上添加新的代码

1. 在test组件ts中添加钩子和日志打印

// 子组件ts 

export class TestComponent implements OnInit{

  ngAfterContentInit(): void {
    console.log("子组件内嵌视图初始化完毕！")
  }

  ngAfterContentChecked(): void {
    console.log("子组件内嵌视图变更检测完毕！")
  }

}

2. 在product父组件ts中添加钩子和日志打印

// 父组件ts

export class ProductComponent implements OnInit, AfterContentChecked, AfterContentInit, AfterViewInit {

  ngAfterViewInit(): void {
    console.log("父组件视图初始化完毕！")
  }

  ngAfterContentInit(): void {
    console.log("父组件内嵌视图初始化完毕！")
  }

  ngAfterContentChecked(): void {
    console.log("父组件内嵌视图变更检测完毕！")
  }
}

输出结果：

---

ngOnDestroy

1. 组件销毁的时候回调用这个钩子方法。
2. 组件什么时候被销毁呢？
   当路由变化的时候，从一个路由跳到另一个路由，这个方法会被调用

逻辑：两个路切换，观察控制台的打印
效果：