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页面的生命周期顺序
- ionViewDidLoad 当页面加载的时候触发,仅在页面创建的时候触发一次,如果被缓存了,那么下次再打开这个页面则不会触发
- ionViewWillEnter 当将要进入页面时或变为一个活动页面时触发
- ionViewDidEnter 当进入页面时触发
- ionViewWillLeave 当将要从页面离开时触发
- ionViewDidLeave 离开页面时触发
- ionViewWillUnload 当页面将要销毁同时页面上元素移除时触发
- ionViewCanEnter 在视图可以进入之前运行。
- 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生命周期的顺序
第一次执行顺序基本如下图,但有些方法其实会多次执行。
最先执行构造方法。这里蓝色的几个方法我还没有用到,
- ngOnChanges()
当Angular(重新)设置数据绑定输入属性时响应。
当被绑定的输入属性的值发生变化时调用,
首次调用一定会发生在ngOnInit()之前,如下图所示 - ngOnInit()
在Angular第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。
在第一轮ngOnChanges()完成之后调用,只调用一次。 - ngDoCheck()
检测,并在发生Angular无法或不愿意自己检测的变化时作出反应。
在每个Angular变更检测周期中调用,ngOnChanges()和ngOnInit()之后。 - ngAfterContentInit()
当把内容投影进组件之后调用。
第一次ngDoCheck()之后调用,只调用一次。
只适用于组件。 - ngAfterContentChecked()
每次完成被投影组件内容的变更检测之后调用。
ngAfterContentInit()和每次ngDoCheck()之后调用
只适合组件。 - ngAfterViewInit()
初始化完组件视图及其子视图之后调用。
第一次ngAfterContentChecked()之后调用,只调用一次。
只适合组件。 - ngAfterViewChecked()
每次做完组件视图和子视图的变更检测之后调用。
ngAfterViewInit()和每次ngAfterContentChecked()之后调用。
只适合组件。 - 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生命周期
相关推荐
genglang 2018-08-17
半纸药笺 2019-06-28
templateUrl:'build/app.html',<ion-navid="nav"[root]="rootPage"#contentswipe-back-enabled="false"
codewhile 2016-03-24
nickking 2019-06-25
samllcat 2019-06-25
samllcat 2019-06-25
庆华 2019-06-25
nickking 2019-06-25
nickking 2019-06-25
庆华 2019-06-21
rimuweinuan 2019-06-21
chenxiangpeng 2019-06-21
rimuweinuan 2019-06-20
samllcat 2019-06-20
nickking 2017-12-01
半纸药笺 2017-08-23
malonely 2017-06-23
kfq00 2017-06-22