一篇文章快速了解Angular和Ionic生命周期和钩子函数

目录
  • Angular
    • 实现
    • 调用顺序
    • 注意
  • Ionic
    • ionic是怎么处理页面的生命周期的
    • 路由守卫
  • 总结

Angular

实现

首先实现方式不用多说，使用钩子函数需要在定义的时候实现对应的接口

export class ListPage implements OnInit {
  constructor() {}

  ngOnInit() {
    // code here
  }
}

调用顺序

1、constructor

最先执行的是构造函数，在执行构造函数的时候，@Input、@ViewChild等很多变量都是不存在的，相关操作最好写在ngOnInit里。

2、ngOnChanges

当前组件@Input/@Output的绑定值发生变化时会触发。
另外如果@Input是对象，只有引用发生变化的情况下才会触发。

3、ngOnInit

在第一次 ngOnChanges 完成后调用，只会执行一次

4、ngDoCheck

开发者自定义变更检测。

5、ngAfterContentInit

组件内容初始化的时候执行一次

6、ngAfterContentChecked

投射到组件的内容每次ngDoCheck调用后触发。

7、ngAfterViewInit

组件及其子组件视图初始化的时候执行一次

8、ngAfterViewChecked

组件及其子组件视图每次ngDoCheck调用后触发。

9、ngOnDestroy

在组件销毁前调用。

注意

  • 并不是所有的数据在constructor里都存在，@ViewChild @ViewChildren @Input等值都还没绑定
  • 任何的变更检测都会触发ngDoCheck，详见 非常消耗性能，需要小心使用

Ionic

原文档可以点上面的链接看到，挑重点说一下。

生命周期如图，除了angular提供的生命周期，ionic添加了几个事件：

  • ionViewWillEnter 路由组件即将显示到视图
  • ionViewDidEnter 路由组件已经显示到视图

在ngOnInit之后触发ionViewWillEnter，页面切换的过渡效果结束之后触发ionViewDidEnter

  • ionViewWillLeave 即将离开当前路由的组件
  • ionViewDidLeave 已经离开当前路由的组件

先调用ionViewWillLeave，直到成功过渡到新页面之后（在新页面ionViewDidEnter触发之后），ionViewDidLeave才被调用。

使用ion-nav或ion-router-outlet的组件不应使用OnPush变化检测策略，这样会导致ngOnInit之类的生命周期hooks无法触发。另外，异步变化的数据可能不能正确渲染。

ionic是怎么处理页面的生命周期的

ionic使用的路由出口是<ion-router-outlet />，它拓展了angular的<router-outlet />，可以在移动设备上有更好体验。

从一个页面跳转到一个新页面的时候，ionic会把旧页面保存在dom中，并且从视图上隐藏。这样可以保持住上一个页面的状态，比如滚动位置、页面数据，这样从新页面返回到上一个页面的时候，就不用重新加载一次，页面过渡也比较平滑。

页面只有从堆栈中退出的时候，才会真正销毁，所以ngOnInit 和ngOnDestroy 触发的时机和想象中可能不太一样。

比如A是详情页，进入B页面修改数据。修改完成后从B页面返回A页面。
如果A页面的数据获取方法是写在ngOnInit里的，那么从B返回到A的时候，因为ngOnInit是不会触发的，显然不符合业务要求。
所以这个数据的获取可以写在ionViewWillEnter里，这样从B返回A的时候就可以触发并更新

路由守卫

Ionic 3里曾经有过ionViewCanEnter 和ionViewCanLeave两个钩子函数，用来判断页面是否可以进入/离开，一般用来限制访问权限 或者离开编辑页面之前弹出二次确认提示。这两个函数已经废弃了，Ionic 4以后使用angular官方的路由守卫。

总结

到此这篇关于Angular和Ionic生命周期和钩子函数的文章就介绍到这了,更多相关Angular Ionic生命周期和钩子函数内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Angular2生命周期钩子函数的详细介绍

    Angular2生命周期钩子函数的详细介绍

    Angular每个组件都存在一个生命周期,从创建,变更到销毁.Angular提供组件生命周期钩子,把这些关键时刻暴露出来,赋予在这些关键结点和组件进行交互的能力,掌握生命周期,可以让我们更好的开发Angular应用 概述 每个接口都有唯一的一个钩子方法,它们的名字是由接口名再加上ng前缀构成的.比如,OnInit接口的钩子方法叫做ngOnInit, Angular在创建组件后立刻调用它 生命周期执行顺序 ngOnChanges 在有输入属性的情况下才会调用,该方法接受当前和上一属性值的Simpl

  • 浅谈对Angular中的生命周期钩子的理解

    本文介绍了Angular中的生命周期钩子的理解,分享给大家,希望对大家有所帮助 什么是生命周期钩子 简单点来说生命周期钩子就是Angular中一个组件从被创建当销毁期间的一些有意义的关键时刻.这些关键时刻在Angular中被Angular核心模块 @angular/core 暴露出来,赋予了我们在它们发生时采取行动的能力. 有哪些生命周期钩子 Angular中从一个组件的创建到销毁一个有八个生命周期钩子它们,按照先后顺序.它们分别是: ngOnChanges() ngOnInit() ngDoC

  • 浅谈angular4生命周期钩子

    浅谈angular4生命周期钩子

    理解 Angular提供了生命周期钩子,把这些关键生命时刻暴露出来,赋予我们在它们发生时采取行动的能力.可以将钩子函数理解为在合适的时候做合适的事情. 钩子函数 ng4主要提供了8个钩子函数: 1.ngOnchanges @input属性(输入属性)发生变化时,会调用.非此属性,不会调用. 当输入属性为对象时,当对象的属性值发生变化时,不会调用,当对象的引用变化时会触发. 先于ngOnInit调用. 2.ngOnInit 只执行一次,dom操作可放在其中.(最常用) 3.NgDocheck 每次

  • 浅谈angular2 组件的生命周期钩子

    浅谈angular2 组件的生命周期钩子

    本文介绍了浅谈angular2 组件的生命周期钩子,分享给大家,具体如下: 按照生命周期执行的先后顺序,Angular生命周期接口如下所示 名称 时机 接口 范围 ngOnChanges 当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 ngOnInit之前. OnChanges 指令和组件 ngOnInit 在第一轮 ngOnChanges 完成之后调用. ( 译注:也就是说当每个输入属性的值都被触发了一次 ngOnChanges之后才会调用 ngOnInit ,此时所有输入属性都已

  • 一篇文章快速了解Angular和Ionic生命周期和钩子函数

    一篇文章快速了解Angular和Ionic生命周期和钩子函数

    目录 Angular 实现 调用顺序 注意 Ionic ionic是怎么处理页面的生命周期的 路由守卫 总结 Angular 实现 首先实现方式不用多说,使用钩子函数需要在定义的时候实现对应的接口 export class ListPage implements OnInit { constructor() {} ngOnInit() { // code here } } 调用顺序 1.constructor 最先执行的是构造函数,在执行构造函数的时候,@Input.@ViewChild等很多变

  • vue生命周期与钩子函数简单示例

    vue生命周期与钩子函数简单示例

    本文实例讲述了vue生命周期与钩子函数.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vue生命周期与钩子函数</title> <style> </style> <script src="https://

  • Vue生命周期和钩子函数的详解与经典面试题

    Vue生命周期和钩子函数的详解与经典面试题

    目录 1. vue生命周期 2.钩子函数 2.1 分为4大阶段8个方法: 2.2 初始化阶段 2.3 挂载阶段 2.4 更新阶段 2.5 销毁阶段 面试题: 总结 1. vue生命周期 一组件从 创建 到 销毁 的整个过程就是生命周期 Vue 实例从创建到销毁的过程,就是生命周期.也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列过程,我们称这是 Vue 的生命周期. 2.钩子函数 Vue 框架内置函数,随着组件的生命周期阶段,自动执行,特定的时间点,执行特定的操

  • vue中的生命周期及钩子函数

    vue中的生命周期及钩子函数

    目录 1.什么是生命周期 2.vue 的生命周期 3.生命周期钩子函数 1.什么是生命周期 Vue 实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载 Dom.渲染 → 更新 → 渲染.卸载等一系列过程,我们称这是 Vue 的生命周期.通俗说就是 Vue 实例从创建到销毁的过程,就是生命周期. 在 Vue 的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册 js 方法,可以让我们用自己注册的 js 方法控制整个大局,在这些事件响应方法中的 this 直接指向的

  • 一篇文章带你了解Maven的生命周期

    一篇文章带你了解Maven的生命周期

    目录 1.什么是 生命周期? 2.Clean Lifecycle:在进行真正的构建之前进行一些清理工作 3.Default Lifecycle:构建的核心部分,编译.测试.打包.安装.部署等等 4.Site Lifecycle:生成项目报告,站点,发布站点. 总结 1.什么是 生命周期? Maven 强大的原因是有一个十分完善的生命周期,生命周期可以理解为项目构建步骤的集合,它定义了各个构建环节的执行顺序,有了这个顺序,Maven 就可以自动化的执行构建命令. Maven的核心程序中定义了抽象的

  • Vue 2.0中生命周期与钩子函数的一些理解

    Vue 2.0中生命周期与钩子函数的一些理解

    前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的. 因为我们有时候会在几个钩子函数里做一些事情,什么时候做,在哪个函数里做,我们不清楚. 于是我开始先去搜索,发现vue2.0的生命周期没啥文章.大多是1.0的版本介绍.最后还是找到一篇不错的(会放在最后) vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0

  • 一篇文章快速了解Python的GIL

    一篇文章快速了解Python的GIL

    前言:博主在刚接触Python的时候时常听到GIL这个词,并且发现这个词经常和Python无法高效的实现多线程划上等号.本着不光要知其然,还要知其所以然的研究态度,博主搜集了各方面的资料,花了一周内几个小时的闲暇时间深入理解了下GIL,并归纳成此文,也希望读者能通过次本文更好且客观的理解GIL. GIL是什么 首先需要明确的一点是GIL并不是Python的特性,它是在实现Python解析器(CPython)时所引入的一个概念.就好比C++是一套语言(语法)标准,但是可以用不同的编译器来编译成可执

  • 详解Angular组件之生命周期(二)

    详解Angular组件之生命周期(二)

    一.view钩子 view钩子有2个,ngAfterViewInit和ngAfterViewChecked钩子. 1.实现ngAfterViewInit和ngAfterViewChecked钩子时注意事项 以父组件调用子组件方法中例子为基础,在父组件中实现ngAfterViewInit和ngAfterViewChecked钩子. 这两个钩子是在组件的模版所有内容组装完成后,组件模版已经呈现给用户看了,之后这两个钩子方法会被调用. @ViewChild('child1') child1:Child

  • react生命周期(类组件/函数组件)操作代码

    1.react代码模式分为两种 类组件和函数组件(生命周期也有所不同) 2.类组件(写法如下) import React from 'react' export default class App1 extends React.Component{ state = { username:'', password:'' } setUser = (event) => { this.setState({username:event.target.value}) } setPass = (event)

随机推荐