二、Angular进阶 - 四、生命周期 - 《三大框架》

一、生命周期的顺序
二、数据改变的时候以下三个生命周期函数会执行
三、DOM获取
- 当DOM节点有指令时

https://angular.cn/guide/lifecycle-hooks
生命周期函数同属的讲,就是组件创建,更新,销毁的时候会触发的一系列方法。

一、生命周期的顺序

当Angular使用构造函数新建一个组件或指令后,就会按下面的顺序在特定时刻调用这些生命周期钩子方法。

钩子	用途及时机
`ngOnChanges()` //有父子组件传值,先触发这个方法。没有就先触发ngOnInit()	当 Angular（重新）设置数据绑定输入属性时响应。该方法接受当前和上一属性值的 `[SimpleChanges](https://angular.cn/api/core/SimpleChanges)` 对象在 `ngOnInit()` 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。
`ngOnInit()`	在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。在第一轮 `ngOnChanges()` 完成之后调用，只调用一次。
`ngDoCheck()` //可以做一些自定义的操作	检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应。在每个变更检测周期中，紧跟在 `ngOnChanges()` 和 `ngOnInit()` 后面调用。
`[ngAfterContentInit()](https://angular.cn/api/router/RouterLinkActive#ngAfterContentInit)` //组件渲染完成后触发	当 Angular 把外部内容投影进组件/指令的视图之后调用。第一次 `ngDoCheck()` 之后调用，只调用一次。
`ngAfterContentChecked()`	每当 Angular 完成被投影组件内容的变更检测之后调用。 `[ngAfterContentInit()](https://angular.cn/api/router/RouterLinkActive#ngAfterContentInit)` 和每次 `ngDoCheck()` 之后调用
`[ngAfterViewInit()](https://angular.cn/api/forms/NgForm#ngAfterViewInit)` //视图加载	当 Angular 初始化完组件视图及其子视图之后调用。第一次 `ngAfterContentChecked()` 之后调用，只调用一次。
`ngAfterViewChecked()`	每当 Angular 做完组件视图和子视图的变更检测之后调用。 `[ngAfterViewInit()](https://angular.cn/api/forms/NgForm#ngAfterViewInit)` 和每次 `ngAfterContentChecked()` 之后调用。
`ngOnDestroy()`	每当 Angular 每次销毁指令/组件之前调用并清扫。在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏。在 Angular 销毁指令/组件之前调用。

//初次加载时触发
 constructor() 
 ngOnInit()

//ngOnChange() 父子组件传参时触发
constructor()    ////import
ngOnChange()
ngOnInit()

ngDoCheck(){
    console.log("ngDoCheck")
  }
  //组件渲染完成之后触发
  ngAfterContentInit(){
    console.log("ngAgerContentInit")
  }
  //试图加载         //import
  ngAfterViewInit(){
    console.log("ngAfterViewInit")
  }
  //销毁时触发
  ngOnDestroy(){      ////import
    console.log("ngOnDestroy")
  }

//重点关注
constructor
ngInit
ngAfterViewInit
ngOnDestory

二、数据改变的时候以下三个生命周期函数会执行

export class HeaderComponent implements OnInit {
  public msg:number = 10;
  constructor() { }
  ngOnInit() {
  }
  changeMsg(){
    this.msg = 20;
  }
  ngDoCheck(){
    console.log("ngDoCheck")
  }
  ngAfterContentChecked(){
    console.log("ngAfterContentChecked")
  }
  ngAfterViewChecked(){
    console.log("ngAfterViewChecked")
  }
}

<p (click)="changeMsg()">{{msg}}</p>

三、DOM获取

推荐在ngAfterViewInit生命周期操作DOM

ngAfterViewInit(){
    //推荐在此生命周期操作dom
    var show:any = document.getElementById("show");
    console.log(show)
  }

<p id="app">about works!</p>
ngOnInit() {
    var app:any = document.getElementById("app");
    app.style.color="red"
    console.log(app)
  }

当DOM节点有指令时

获取不到DOM节点

<div id="show" *ngIf="flag">显示</div>
  ngOnInit() {
    var show:any = document.getElementById("show");
    console.log(show)
  }

解决：ViewChild

//1.给DOM命名
<div #app  *ngIf="flag">
    显示
</div>

//2.配置ViewChild
import { Component, OnInit,ViewChild } from '@angular/core';
export class AboutComponent implements OnInit {
  @ViewChild('app',{static:false}) app:any;
  ngAfterViewInit(){
   console.log(this.app);
  }
}