Angular2 生命周期钩子

Angular每个组件和指令都存在一个生命周期,从创建,变更到销毁。Angular提供组件生命周期钩子,把这些关键时刻暴露出来,赋予在这些关键结点和组件进行交互的能力,掌握生命周期,可以让我们更好的开发Angular应用。
每个接口都有唯一的一个钩子方法,它们的名字是由接口名加上 ng前缀构成的。比如,OnInit接口的钩子方法叫做ngOnInit。

钩子函数适用范围:


适用范围:指令和组件

ngOnInit:当Angular初始化完成数据绑定的输入属性后,用来初始化指令或者组件。

ngOnChanges:当Angular设置了一个被绑定的输入属性后触发。该回调方法会收到一个包含当前值和原值的changes对象。

ngDoCheck:用来检测所有变化(无论是Angular本身能检测还是无法检测的),并作出相应行动。在每次执行“变更检测”时被调用。

ngOnDestory:在Angular销毁指令或组件之前做一些清理工作,比如退订可观察对象和移除事件处理器,以免导致内存泄漏。

适用范围:只适用于组件

ngAfterContentInit:当Angular把外来内容投影进自己的视图之后调用。

ngAfterContentChecked:当Angular检查完那些投影到自己视图中的外来内容的数据绑定之后调用。

ngAfterViewInit:在Angular创建完组件的视图后调用。

ngAfterViewChecked:在Angular检查完组件视图中的绑定后调用。

生命周期顺序:


ngOnChanges
      在有输入属性的情况下才会调用,该方法接受当前和上一属性值的SimpleChanges对象。如果有输入属性,会在ngOnInit之前调用。

ngOnInit
      在组件初始化的时候调用,只调用一次,在第一次调用ngOnChanges之后调用。

ngDoCheck
      在组件定义的属性或方法变更时调用(用于脏值之检测,非常耗性能,因为会把所有的属性和方法都检测一遍),会在ngOnChanges()和ngOnInit()之后。

ngAfterContentInit
      在组件内容初始化之后调用,在第一次ngDoCheck之后调用,只调用一次

ngAfterContentChecked
      在组件每次检查内容发生变更时调用。在ngAfterContentInit和每次ngDoCheck之后调用。

ngAfterViewInit
      在组件相应的视图初始化之后调用,第一次ngAfterContentChecked之后调用,只调用一次

ngAfterViewChecked
      在组件每次检查视图发生变更时调用。ngAfterViewInit和每次ngAfterContentChecked之后调用。

ngOnDestroy
      在组件销毁前调用。

猜你喜欢

转载自blog.csdn.net/try_try_try/article/details/80108848
今日推荐