angular-生命周期

Angular组件中主要有八个生命周期函数，也叫生命周期钩子，组件在创建、更新、销毁时会触发的方法

constructor

使用简单的值对局部变量进行初始化

ngOnChanges()

当被绑定的输入属性的值发生变化时调用(父子组件传值的时候会触发)

ngOnInit()，重点掌握

Angular第一次显示数据绑定和设置组件/指令的输入属性后，初始化组件或指令，对该组件进行准备

ngDoCheck()

该函数在ngOnInt函数之后触发可以做一些自定义的操作，比如查看数据是否改变，在发生 Angular 无法或不愿意自己检测的变化时作出反应

ngAfterContentInit()

把内容投影进组件之后调用，组件渲染完成后触发，第一次ngDoCheck()之后调用，只调用一次

ngAfterContentChecked()

每次完成被投影组件内容的变更检测之后调用，组件初始化渲染完成后，做一些自定义操作，ngAfterContentInit() 和每次ngDoCheck()之后调用。

ngAfterViewInit()  重点掌握

初始化完组件视图及其子视图之后调用(dom操作放在这个里面)，组件视图及子视图初始化完成后调用，该函数一般进行dom操作，第一次ngAfterContentChecked()之后调用，只调用一次。

ngAfterViewChecked()

每次做完组件视图和子视图的变更检测之后调用，ngAfterViewInit函数之后做一些自定义的操作，ngAfterViewInit()和每次ngAfterContentChecked() 之后调用

ngOnDestroy()  重点掌握

组件销毁时触发

绑定数据改变时触发的生命周期函数

ngDoCheck() $\color{red}{查看数据是否改变}$
ngAfterContentChecked() $\color{red}{组件渲染完成,做一些自定义操作}$
ngAfterViewChecked() $\color{red}{组件渲染完成后调用}$
$\color{red}{}$

带有Init的生命周期函数只会触发一次

ngOnInit() $\color{red}{初始化组件、指令}$
ngAfterContentInit() $\color{red}{组件挂载完成}$
ngAfterViewInit() $\color{red}{组件初次挂载完成后只调用一次}$
$\color{red}{}$

angular-生命周期

Angular组件中主要有八个生命周期函数，也叫生命周期钩子，组件在创建、更新、销毁时会触发的方法

绑定数据改变时触发的生命周期函数

带有Init的生命周期函数只会触发一次

推荐阅读更多精彩内容