Angular生命周期钩子

1. 生命周期钩子的调用顺序

constructor -> ngOnchanges -> ngOnInit -> ngDoCheck 
-> ngAfterContentInit -> ngAfterContentChecked -> ngAfterViewInit -> ngAfterViewChecked -> ngOnDestory 
前四个是属性的初始化阶段，后四个是页面渲染的阶段

2. ngOnchanges

该钩子在父组件初始化或者修改子组件的不可变对象输入属性时被调用。 

1 输入属性 [@Input()]
2 不可变对象。String, Integer ,boolean等属于不可变对象；定义了一个对象，例如 hereos 则属于引用类型,hereos中的属性(比如 hereos.name)发生变化，不会触发做个钩子。
3 整个生命周期内会被多次调用

3. ngOnInit

和constructor的区别：父组件初始化子组件之前，子组件的输入属性的值是空的，是通过ngOnInit给输入属性赋值。构造函数不会初始化输入属性的值。

1 在第一轮ngOnChanges()完成之后调用
2 主要是对除了输入属性的所有的属性的初始化

3 整个生命周期只会被调用一次。

4. ngDoCheck

1 变更检查，这个钩子会被非常频繁地调用，鼠标点击事件等任何可能会触发变更的事件都会触发这个钩子，而其中只有很少的变化是我们真正需要的变化，因此在 ngDoCheck() 中一定要判断要检测变化的值和原来的值比较一次，然后再做相应的操作 
2 Angular默认的检测机制是从 AppComponent 这个根组件开始，每个组件都会检测是否变更，因此不是只有发生变化的组件的ngDoCheck()方法会被调用，而是所有组件的 ngDoCheck()方法都会被调用 
3 因为这个钩子会被非常频繁地调用，所以这个钩子的实现一定是要非常轻量级的 4 整个生命周期内会被多次调用

5. ngAfterContentInit ngAfterContentChecked

1 该组件中的投影内容投影进组件之后被调用; 投影：从父组件投影到该组件<ng-content></ng-content> 

// 父组件 
<app-child> 
    <p>我是父组件向子组件的投影内容</> 
</app-child> 

// 子组件 ChildComponent 
<div> 
    //接受父组件的投影内容 
    <ng-content></ng-content> 
</div>

 

2 整个生命周期只会被调用一次; 
3 在这两个钩子里面去改变模板显示的修改是不会报错的; 
4 在ngAfterContentChecked 钩子之后，会去执行该组件的子组件的整个生命周期

5 ngAfterContentInit 在整个生命周期内只会被调用一次。

6. ngAfterViewInit ngAfterViewChecked

1 这两个钩子在组件的模板所有的内容都被组装完成，模板的内容呈现给用户之后被调用 
2 在这两个钩子中不能做出修改改变组件模板内容,模板中被绑定的值，解决方法是把改变放在 setTimeout 中，另起一个 js 线程 
3 ngAfterContentInit 在整个生命周期内只会被调用一次; 
4 所有的带 Check的钩子都会被非常频繁的调用，所以要谨慎使用; 
5 该组件所有的子组件的这两个钩子被调用之后，这个组件的这两个钩子才会被调用

7. ngOnDestory

1 从一个路由跳转到另一个路由的时候，前一个路由的component的会被销毁; 
2 这个钩子只会被调用一次。