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页面的生命周期顺序

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

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

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

二、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生命周期的顺序

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

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

  1. ngOnChanges()
    当Angular(重新)设置数据绑定输入属性时响应。
    当被绑定的输入属性的值发生变化时调用,
    首次调用一定会发生在ngOnInit()之前,如下图所示
    Ionic2入门教程(十四)一点也不好玩的生命周期
  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生命周期

相关推荐