Angular生命周期

生命周期钩子

官网解释

Angular 建立它，渲染它，建立并渲染它的子组件，在它被绑定的属性发生变化时检查它，并在它从 DOM 中被移除前销毁它。
Angular 提供了生命周期钩子，把这些关键生命时刻暴露出来，赋予你在它们发生时采起行动的能力。
除了那些组件内容和视图相关的钩子外,指令有相同生命周期钩子。

我的理解

生命周期函数通俗的讲就是组件建立、组件更新、组件销毁的时候会触发的一系列的方法。

组件生命周期钩子概览

当 Angular 使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些 生命周期钩子方法
每一个接口都有惟一的一个钩子方法，它们的名字是由接口名再加上ng前缀构成的，好比OnInit接口的钩子方法叫作ngOnInit.

一、生命周期钩子分类 – – – 基于指令与组件的区别来分类

1.1 指令与组件共有的钩子

1.ngOnChanges
2.ngOnInit
3.ngDoCheck
4.ngOnDestroy

1.2 组件特有的钩子

1.ngAfterContentInit
2.ngAfterContentChecked
3.ngAfterViewInit
4.ngAfterViewChecked

二、生命周期钩子的做用及调用顺序

一、ngOnChanges – 当数据绑定输入属性的值发生变化时调用
二、ngOnInit – 在第一次 ngOnChanges 后调用
三、ngDoCheck – 自定义的方法，用于检测和处理值的改变
四、ngAfterContentInit – 在组件内容初始化以后调用
五、ngAfterContentChecked – 组件每次检查内容时调用
六、ngAfterViewInit – 组件相应的视图初始化以后调用
七、ngAfterViewChecked – 组件每次检查视图时调用
八、ngOnDestroy – 指令销毁前调用

三、生命周期加载顺序

3.1 首次加载

3.2 点击输入框，绑定数据变化以后，加载的钩子

组件生命周期钩子详解

一、constructor

constructor 初始化类。Angular中的组件就是基于class类实现的，在Angular中，constructor 用于注入依赖。组件的构造函数会在全部的生命周期钩子以前被调用，它主要用于依赖注入或执行简单的数据初始化操做。

一、ngOnchanges()

在父组件初始化或修改子组件的输入参数时调用，如图所示，在父组件中修改子组件的值，会触发子组件的ngOnchanges。

二、ngOnInit()

在 Angular 第一次显示数据绑定和设置指令/组件的输入属性以后，初始化指令/组件。在第一轮 ngOnChanges() 完成以后调用，只调用一次。能够在这个钩子函数中请求数据

三、ngDoCheck()

检测并在发生 Angular 没法或不肯意本身检测的变化时做出反应。在每一个 Angular 变动检测周期中调用， 在ngOnChanges() 和 ngOnInit()以后。

四、ngAfterContentInit()

当把内容投影进组件以后调用。第一次 ngDoCheck() 以后调用，只调用一次

五、 ngAfterContentChecked()

初始化完组件视图及其子视图以后调用。第一 次 ngAfterContentChecked() 以后调用，只调用一次。在这里能够操做DOM

六、ngAfterViewChecked()

每次作完组件视图和子视图的变动检测以后调用。 ngAfterViewInit()和每次ngAfterContentChecked() 以后 调用。

七、ngOnDestroy()

当 Angular 每次销毁指令/组件以前调用并清扫。在这儿反订阅可观察对象和分离事件处理器，以防内存泄 漏。在 Angular 销毁指令/组件以前调用。好比：移除事件监听、清除定时器、退订 Observable 等。