angular的每个组件都存在生命周期,从创建,变更到销毁。angular提供组件生命周期钩子,把这些关键时刻暴露出来。赋予在关键节点和组件进行交互的能力。
概述
每个接口都有唯一的一个钩子方法,它们的方法是由接口名再加上ng前缀构成的。比如,OnInit的接口钩子的方法叫ngOnInit,angular在创建组件之后调用。
生命周期执行顺序
ngOnChanges
在有输入属性的时候才会调用,该方法接收一个类型为SimpleChanges的对象,如果有输入属性,会在ngOnInit之前调用。
SimpleChanges的值包含:previousValue:any,currentValue:any,firstChange:boolean
ngOnInit
组件初始化,只调用一次,在第一次调用ngOnChange时调用。
ngDoCheck
在组件定义的属性或方法变更时调用(用于脏值检查,非常消耗性能,因为会把所有的属性和方法都检查一遍),会在ngOnChange和ngOnInit之后调用。
ngAfterContentInit
在组件内容初始化之后调用,在第一次ngDoCheck之后调用,只调用一次。
ngAfterContentChecked
在组件每次检查内容发生变更时调用。在ngAfterContentInit和每次ngDoCheck之后调用。
ngAfterViewInit
在组件相应的视图初始化之后调用,第一次ngAfterContentCheck之后调用,只调用一次。
ngAfterViewChecked
在组件每次检查视图发生变更时调用,在ngAfterViewInit和每次ngAfterContentChecked之后调用。
ngOnDestroy
在组件销毁前调用,做一些清理工作,比如退订可观察对象(subscription)和移除事件处理器,以免导致内存泄漏。
constructor和ngOnInit
constructor是ES6中class中新增的属性,当class类实例化的时候调用constructor来初始化类。angular中的组件是基于class类实现的,在angular中,constructor用来依赖注入。
ngOnInit是angular生命周期的一部分,在constructor之后执行,在angular中用于初始化变量和数据绑定。
ngAfterContentInit和ngAfterViewInit的区别
view:是当前组件的模板。
content:通常指被映射到一个组件的ng-content中的内容。
视图初始化在内容之后,所以ngAfterViewInit在ngAfterContentInit之后执行。