接触过 react 和 vue 开发的读者应该对生命周期这个概念不陌生。我们在使用 angular 开发的过程中，是避免不了的。【相关教程推荐：《angular教程》】
组件从开始建立到销毁的过程中，会经历过一系列的阶段。这就是一个生命周期，这些阶段对应着应用提供的 lifecycle hooks。
那么，在 angular 中，这些 hooks 都有哪些呢？了解它们，对你编写程序应该在哪里编写，很重要。
angular 中，生命周期执行的顺序如下：
- constructor 【常用，不算钩子函数，但是很重要】- ngonchanges【常用】- ngoninit【常用】- ngdocheck - ngaftercontentinit - ngaftercontentchecked - ngafterviewinit【常用】 - ngafterviewchecked- ngondestroy【常用】
为了解说和验证，我们用 angular-cli 生成一个 demo 项目。
constructor在 es6 中的 class 初始化对象的时候，constructor 会立即被调用。
class person { constructor(name) { console.log('be called') this.name = name; }}let jimmy = new person('jimmy'); // be called
angular 的组件本身就是导出一个类。当这个组件被 new 起来的时候，会获取 constructor 中的预设的值。
ngonchanges当我们有外部参数更改的时候，我们就会执行 ngonchanges，也就是说组件中有 @input 所绑定的属性值发生改变的时候调用。
简单说，父组件绑定子组件中的元素，会触发这个钩子函数，可以多次出发。这在下面的 ngoninit 总会介绍。
ngoninit这个方法调用的时候，说明组件已经初始化成功。在第一次 ngonchanges() 完成之后调用，且只调用一次。
// app.component.tsexport class appcomponent implements oninit, onchanges { constructor() { console.log('1. constructor') } ngonchanges() { console.log('2. ngonchanges') } ngoninit() { console.log('3. ngoninit') }}
打印的信息如下：
咦？怎么没有打印 ngonchanges 中的钩子函数信息呢？
上面已经说过了，需要触发条件 @input 的属性值改变的时候。我们来修改一下：
<!-- app.component.html --><div> <app-demo></app-demo></div>
// app.component.ts// appcomponent 类中添加属性public count:number = 0;
<!-- demo.component.html --><h3>count: {{ count }}</h3>
// demo.component.tsexport class democomponent implements oninit, onchanges { @input() public count: number; constructor() { console.log('1. demo constructor') } ngonchanges() { console.log('2. demo ngonchanges') } ngoninit() { console.log('3. demo ngoninit') }}
当通过 @input 将值传递给子组件 demo 的时候，就会触发 demo 组件中的 ngonchanges。
当 @input 传递的属性发生改变的时候，可以多次触发 demo 组件中的 ngonchanges 钩子函数。
<!-- app.component.html --><div> <app-demo [count]="count"></app-demo> <button (click)="parentdemo()">parent button</button></div>
// app.component.tsparentdemo() { this.count++;}
ngdocheck当发生变化检测的时候，触发该钩子函数。
这个钩子函数，紧跟在每次执行变更检测时候 ngonchanges 和首次执行执行变更检测时 ngoninit 后面调用。
// demo.component.tsngdocheck() { console.log('4. demo ngdocheck')}
这个钩子函数调用得比较频繁，使用成本比较高，谨慎使用。
一般使用 ngonchanges 来检测变动，而不是 ngdocheck
ngaftercontentinit当把外部的内容投影到内部组件，第一次调用 ngdocheck 之后调用 ngaftercontentinit，而且只调用一次。
// demo.component.tsngaftercontentinit() { console.log('5. demo ngaftercontentinit');}
ngaftercontentcheckedngaftercontentchecked 钩子函数在每次 ngdocheck 之后调用.
// demo.component.tsngaftercontentchecked() { console.log('5. demo ngaftercontentchecked');}
ngafterviewinit视图初始化完成调用此钩子函数。在第一次 ngaftercontentchecked 之后调用，只调用一次。
这个时候，获取页面的 dom 节点比较合理
// demo.compoent.tsngafterviewinit() { console.log('7. demo ngafterviewinit');}
ngafterviewchecked视图检测完成调用。在 ngafterviewinit 后调用，和在每次 ngaftercontentchecked 之后调用，也就是在每次 ngdocheck 之后调用。
// demo.component.tsngafterviewchecked() { console.log('8. ngafterviewchecked')}
ngondestroy组件被销毁时候进行的操作。
在这个钩子函数中，我们可以取消订阅，取消定时操作等等。
<!-- app.component.html --><app-demo [count]="count" *ngif="showdemocomponent"></app-demo><button (click)="hidedemo()">hide demo component</button>
// app.component.tspublic showdemocomponent: boolean = true;hidedemo() { this.showdemocomponent = false}
// demo.component.tsngondestroy() { console.log('9. demo ngondestroy')}
ps: 不知道读者有没有发现，调用一次的钩子函数都比较常用～
【完】
更多编程相关知识，请访问：编程入门！！
以上就是一文聊聊angular中的生命周期的详细内容。