生命周期的顺序

当Angular使用构造函数新建一个组件或指令后,就会按下面的顺序在特定时刻调用这些生命周期钩子方法:

钩子

目的和时机

ngOnChanges()

当Angular(重新)设置数据绑定输入属性时响应。 该方法接受当前和上一属性值的SimpleChanges对象

当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在ngOnInit()之前。

ngOnInit()

在Angular第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。

在第一轮ngOnChanges()完成之后调用,只调用一次。

ngDoCheck()

检测,并在发生Angular无法或不愿意自己检测的变化时作出反应。

在每个Angular变更检测周期中调用,ngOnChanges()ngOnInit()之后。

ngAfterContentInit()

当把内容投影进组件之后调用。

第一次ngDoCheck()之后调用,只调用一次。

只适用于组件。

ngAfterContentChecked()

每次完成被投影组件内容的变更检测之后调用。

ngAfterContentInit()和每次ngDoCheck()之后调用

只适合组件。

ngAfterViewInit()

初始化完组件视图及其子视图之后调用。

第一次ngAfterContentChecked()之后调用,只调用一次。

只适合组件。

ngAfterViewChecked()

每次做完组件视图和子视图的变更检测之后调用。

ngAfterViewInit()和每次ngAfterContentChecked()之后调用。

只适合组件。

ngOnDestroy

当Angular每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器,以防内存泄漏。

在Angular销毁指令/组件之前调用。

angular2-生命周期钩子函数的更多相关文章

  1. vue之生命周期钩子函数之运用

    一.什么是生命周期钩子函数: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行 ...

  2. 关于 vue 生命周期 钩子函数 事件

    vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染->更新->渲染.卸载等一系列过程,我们称这是vue的生命周期. 通俗的将就是vue实例从创建到销毁 ...

  3. Vue生命周期 钩子函数和组件传值

    Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...

  4. 对vue生命周期/钩子函数的理解

    对于实现页面逻辑交互等效果,我们必须知晓vue的生命周期,才能愉快的玩耍,知道我们写的东西应该挂载到哪里,vue官方给出的api讲解的那叫一个简单啊,如下: 所有的生命周期钩子自动绑定this上下文到 ...

  5. vue生命周期 钩子函数

    首先,1.x和2.x的生命周期钩子对比: 钩子函数的树状图,红色的是我们可以利用的函数,绿色的是函数解析,蓝色的是函数执行时机 <!DOCTYPE html> <html> & ...

  6. Vue 2.0 生命周期-钩子函数理解

    Vue 2.0 + 生命周期钩子在项目过程中经常用到,所以闲下来整理了下,直接复制下面的实例运行: <!DOCTYPE html> <html lang="en" ...

  7. 了解angularjs中的生命周期钩子函数$onInit,$onChange,$onDestory,$postLink

     壹 ❀ 引 我在前面花了三篇文章用于介绍angularjs的指令directive,组件component,并专门花了一篇文章介绍directive与component的不同,其中提到在compon ...

  8. 什么是vue生命周期和生命周期钩子函数?

    原文地址 vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩 ...

  9. VueAPI 2 (生命周期钩子函数)

    所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法. beforeCreate 在实例初始化之后,此时还不 ...

  10. Angular2 -- 生命周期钩子

    组件生命周期钩子 指令和组件的实例有一个生命周期:新建.更新和销毁. 每个接口都有唯一的一个钩子方法,它们的名字是由接口名加上 ng前缀构成的.比如,OnInit接口的钩子方法叫做ngOnInit. ...

随机推荐

  1. Python第四次作业

    设计题1: 设计一个本月份日历,输出格式如下: 要求: 1.初始化start_day,end_day两个日期 from datetime import datetime start_day=datet ...

  2. AttributeError: module 'yagmail' has no attribute 'SMTP',关于使用yagmail发邮件报错的解决方法

    想用yagmail,发送自动化测试结果邮件,发现运行的时候报错.最后发现是自己的脚本名称用的yagmail.py,更改成另一个就好,换了my_yagmail.py 再运行OK啦!!!!

  3. angular-ui-select 下拉框支持过滤单选多选解决方案(系列一)

    angular-ui-select  官方文档:github地址:https://github.com/angular-ui/ui-select 请大家多看文档     首先注意版本的问题,如果版本不 ...

  4. Springboot 整合 中国移动MAS HTTP1.0 实现短信发送服务(二)

    原因:身份验证传入的参数包含中文企业名,因为本地编码格式是支持中文的:而客户的服务器中文却乱码,导致传给中国移动MAS服务器的是乱码的信息. 解决:非常简单,将中文信息转为UTF-8.例如(%E5%8 ...

  5. flask 的上下文管理

    Flask的上下文对象 Flask有两种Context(上下文),分别是 RequestContext 请求上下文 Request 请求的对象,封装了Http请求(environ)的内容 Sessio ...

  6. ProgressBar(进度条)、SeekBar(拖动条)与星级评分条(RatingBar)

    1.ProgressBar(进度条) (1)介绍 (2)常用属性 (3)xml代码 <ProgressBar android:id="@+id/progressBar2" s ...

  7. 老男孩python作业2-购物车程序

    购物车程序要求: 1.启动程序后,输入用户名密码后,如果是第一次登录,让用户输入工资,然后打印商品列表 2.允许用户根据商品编号购买商品 3.用户选择商品后,检测余额是否够,够就直接扣款,不够就提醒 ...

  8. LOJ6519. 魔力环(莫比乌斯反演+生成函数)

    题目链接 https://loj.ac/problem/6519 题解 这里给出的解法基于莫比乌斯反演.可以用群论计数的相关方法代替莫比乌斯反演,但两种方法的核心部分是一样的. 环计数的常见套路就是将 ...

  9. 109th LeetCode Weekly Contest Knight Dialer

    A chess knight can move as indicated in the chess diagram below:  .            This time, we place o ...

  10. SGU - 495 概率DP

    题意:n个带礼物的盒子和m个人,每个人拿一个盒子并放回,如果里面有礼物就拿走(盒子还是留下),问m个人带走礼物的期望 #include<iostream> #include<algo ...