Angular4 生命周期总结

Angular4 中组件从生到死经历了多个阶段，我们可以通过钩子函数进入到组件的每个生命阶段。关于生命周期的文章我看了很多，但是论清晰透彻都不如官方文档中的描述。我写这篇博客的目的是在认真阅读官方文档的基础上试图用最简单的一两句话对每个周期的特点做个总结，这样以后在回顾的时候可以用最短的时间把记忆唤醒。

Angular4 中文官方文档之组件生命周期

下面就是我的总结：

• constructor:

• ngOnchanges:
  1) 被绑定的输入属性的值发生变化时调用
  2) 首次调用一定会发生在ngOnInit()之前

• ngOnInit:
  1) 第一轮ngOnChanges()完成之后调用
  2) 只调用一次

• ngDoCheck:
  1) 检测那些Angular自身无法捕获的变更
  2) 可能会被多次调用（填写逻辑时注意performance）

ngOnchanges vs ngDoCheck

// power: string.  hero: {name: string; id: number;}
// power的变化ngOnchanges可以捕捉到，this.hero.name的变化ngOnchanges捕捉不到，这时候
// 就需要ngDoCheck出来收拾残局了
<on-changes [hero]="hero" [power]="power"></on-changes> 

• ngAfterContentInit: && ngAfterContentChecked:
  1) 组件的模板中出现了ng-content标签
  2) Angular在每次调用AfterView钩子之前也会同时调用AfterContent。 Angular在完成当前组件的视图合成之前，就已经完成了被投影内容的合成。 所以我们仍然有机会去修改那个视图

• ngAfterViewInit: && ngAfterViewChecked:
  1) 这个钩子中可以获取ViewChildren （通过设置@viewChild）

下一篇博客准备整理一下Ionic2自带钩子和Angular4钩子的对应关系