Ionic2入门教程（十四）一点也不好玩的生命周期

Ionic2入门教程（十四）避无可避的生命周期

❤ 系列教程看这里
Ionic2入门教程（一）安装和环境配置
Ionic2入门教程（二）进阶配置：Android打包
ionic2入门教程（三）高仿网易公开课（1）
ionic2入门教程（四）解读目录结构
ionic2入门教程（五）如何使用IonicPage
ionic2入门教程（六）地图服务（谷歌、高德、百度定位）
ionic2入门教程（七）来一个五星评分
ionic2入门教程（八）高仿网易公开课（2）
ionic2入门教程（九）样式修改和主题切换
Ionic2入门教程（十）如何debug一个Ionic应用
Ionic2入门教程（十一）制作一个视频背景欢迎页
Ionic2入门教程（十二）使用阿里巴巴矢量图标库Iconfont
Ionic2入门教程（十三）带你走近3款二维码扫描插件

---

最近因为这个折腾的挺久的，之前简单地看过一些关于ionic和angular的生命周期说明，不实际用看再多还是不算了解的。
本文主要分为两个部分，一个是ionic页面的生命周期，一个是angular组件的生命周期，其实页面也是组件，只是不复用，ionic也单独弄了一套生命周期，所以和angular的组件生命周期还是不同的，使用的形式也不一样。
两种在有些情况下，其实是会互相影响的。

一、ionic页面的生命周期

ionic官方文档：https://ionicframework.com/do...

1.1页面的生命周期事件

生命周期事件在导航的不同阶段被触发，它们可以在任何能够由导航控制器push/pop的组件类型中定义。

1.2页面的生命周期顺序

1. ionViewDidLoad 当页面加载的时候触发，仅在页面创建的时候触发一次，如果被缓存了，那么下次再打开这个页面则不会触发
2. ionViewWillEnter 当将要进入页面时或变为一个活动页面时触发
3. ionViewDidEnter 当进入页面时触发
4. ionViewWillLeave 当将要从页面离开时触发
5. ionViewDidLeave 离开页面时触发
6. ionViewWillUnload 当页面将要销毁同时页面上元素移除时触发
7. ionViewCanEnter 在视图可以进入之前运行。
8. ionViewCanLeave 在视图可以离开之前运行。

二、angular组件的生命周期

angular官方文档：https://www.angular.cn/guide/...

每个组件都有一个被Angular管理的生命周期。Angular创建它，渲染它，创建并渲染它的子组件，在它被绑定的属性发生变化时检查它，并在它从DOM中被移除前销毁它。

2.1生命周期钩子接口

通过实现一个或多个Angular core库里定义的生命周期钩子接口，开发者可以介入该生命周期中的这些关键时刻。每个接口都有唯一的一个钩子方法，它们的名字是由接口名再加上ng前缀构成的。
没有指令或者组件会实现所有这些接口，并且有些钩子只对组件有意义。只有在指令/组件中定义过的那些钩子方法才会被Angular调用。

//如OnInit接口的钩子方法叫做ngOnInit 
export class MyComponent implements OnInit {
  constructor() { }
  ngOnInit() { console.log(`OnInit`); }
}

2.2生命周期的顺序

第一次执行顺序基本如下图，但有些方法其实会多次执行。
最先执行构造方法。这里蓝色的几个方法我还没有用到，

1. ngOnChanges()
   当Angular（重新）设置数据绑定输入属性时响应。
   当被绑定的输入属性的值发生变化时调用，
   首次调用一定会发生在ngOnInit()之前，如下图所示
   
2. ngOnInit()
   在Angular第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。
   在第一轮ngOnChanges()完成之后调用，只调用一次。
3. ngDoCheck()
   检测，并在发生Angular无法或不愿意自己检测的变化时作出反应。
   在每个Angular变更检测周期中调用，ngOnChanges()和ngOnInit()之后。
4. ngAfterContentInit()
   当把内容投影进组件之后调用。
   第一次ngDoCheck()之后调用，只调用一次。
   只适用于组件。
5. ngAfterContentChecked()
   每次完成被投影组件内容的变更检测之后调用。
   ngAfterContentInit()和每次ngDoCheck()之后调用
   只适合组件。
6. ngAfterViewInit()
   初始化完组件视图及其子视图之后调用。
   第一次ngAfterContentChecked()之后调用，只调用一次。
   只适合组件。
7. ngAfterViewChecked()
   每次做完组件视图和子视图的变更检测之后调用。
   ngAfterViewInit()和每次ngAfterContentChecked()之后调用。
   只适合组件。
8. ngOnDestroy
   当Angular每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏。
   在Angular销毁指令/组件之前调用。

除了4,5,6,7,只适合组件，其余均可用于指令和组件。

三、补充

测试ionic页面生命周期
ionViewCanEnter(){
    console.log("canenter");
   }
  ionViewCanLeave(){
    console.log("canleave");
   }
  ionViewDidEnter(){
   console.log("didenter")
  //  this.ngOnInit();
  }
  ionViewDidLeave(){
   console.log("didleave");
  }
  ionViewWillLeave(){
    console.log("willleave");
   }
  ionViewWillEnter(){
   console.log("willenter")
  }
  ionViewWillUnload(){
   console.log("willunload");
  }
  ionViewDidLoad(){
   console.log("didload");
  }

测试angular生命周期