Angular生命周期

生命周期钩子

官网解释

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

个人理解

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

组件生命周期钩子概览

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

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

1.1 指令与组件共有的钩子

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

1.2 组件特有的钩子

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

2、生命周期钩子的作用及调用顺序

1、ngOnChanges – 当数据绑定输入属性的值发生变化时调用
2、ngOnInit – 在第一次 ngOnChanges 后调用
3、ngDoCheck – 自定义的方法，用于检测和处理值的改变
4、ngAfterContentInit – 在组件内容初始化之后调用
5、ngAfterContentChecked – 组件每次检查内容时调用
6、ngAfterViewInit – 组件相应的视图初始化之后调用
7、ngAfterViewChecked – 组件每次检查视图时调用
8、ngOnDestroy – 指令销毁前调用

3、生命周期加载顺序

3.1 首次加载

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

组件生命周期钩子详解

1、constructor

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

1、ngOnchanges()

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

2、ngOnInit()

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

3、ngDoCheck()

检测并在发生 Angular 无法或不愿意自己检测的变化时作出反应。在每个 Angular 变更检测周期中调用， 在ngOnChanges() 和 ngOnInit()之后。

4、ngAfterContentInit()

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

5、 ngAfterContentChecked()

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

6、ngAfterViewChecked()

每次做完组件视图和子视图的变更检测之后调用。 ngAfterViewInit()和每次ngAfterContentChecked() 之后 调用。

7、ngOnDestroy()

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