Angular8 实战（十三）组件生命周期（1）

本章讲解组件的生命周期

Angular 提供了一系列关于生命周期的钩子函数（constructor不属于生命周期的钩子函数）。

13-1

图中描述了每个函数在什么时候被调用，那么接下来我们来在代码中示例一下每个函数的用法。
以Scrollable-tab组件为例，在创建组件时，angular会默认创建并实现了两个函数 constructor 和 ngOnInit。

ngOnInit & constructor

export class ScrollableTabComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

如下，我们分别在ngOnInit和constructor中分别输出当前函数，执行看一下调用顺序。

13-2.gif

另外，

接口是可选的，也就是说只要有类似ngOnInit这样的方法存在，生命周期的钩子函数还是正常执行
但是建议实现接口，好处一个是不会由于误删除某个钩子函数；另一个是对组件涉及到哪些生命周期一目了然
构造函数总是会第一个被调用
ngOnInit()：组件初始化完成，在这个函数中，可以安全使用组件的属性和方法。构造函数中可能出现未初始化完成的情况。

ngOnChanges

ngOnChanges在生命周期图中是在ngOnInit之前，此函数有一个默认参数SimpleChanges，接下来我们打印这个参数看一下

13-3.gif

从示例中可以看出，输入属性是一个字典型的对象。这个字典的每一个key值就是输入的参数名。下一层同样是字典型参数，可以看出“当前值”，“前一个值”，“是否第一次改变”。所有改变的输入属性都会列在这个SimpleChanges中。

为了让大家更清楚ngOnChanges函数，我们在父组件中改变值来看一下。

13-4.gif

从示例中可以看出ngOnchanges这个钩子函数可以被调用多次，只是组件第一次加载的时候是在ngOnInit之前的。ngOnInit这个钩子函数在组件的生命周期中只装载一次，但是ngOnChanges可以是多次的。

ngDoCheck

ngDoCheck主要是Angular框架来做脏值检测的，此篇一带而过后面会详细讲解。简单理解这个和ngOnChanges有一点类似。ngOnChanges是只监听组件本身的变化，是主动接收输入属性的变化情况。ngDoCheck是Angular对整个框架的监听，而此时scrollable-tab组件有值变化所以DoCheck事件在此组件中装载。同样这个事件也是多次装载的。

13-5.gif