组件生命周期钩子

指令和组件的实例有一个生命周期:新建、更新和销毁。
每个接口都有唯一的一个钩子方法,它们的名字是由接口名加上 ng前缀构成的。比如,OnInit接口的钩子方法叫做ngOnInit
指令和组件
ngOnInit:当Angular初始化完成数据绑定的输入属性后,用来初始化指令或者组件。
ngOnChanges:当Angular设置了一个被绑定的输入属性后触发。该回调方法会收到一个包含当前值和原值的changes对象。
ngDoCheck:用来检测所有变化(无论是Angular本身能检测还是无法检测的),并作出相应行动。在每次执行“变更检测”时被调用。
ngOnDestory:在Angular销毁指令或组件之前做一些清理工作,比如退订可观察对象和移除事件处理器,以免导致内存泄漏。
只适用于组件
ngAfterContentInit:当Angular把外来内容投影进自己的视图之后调用。
ngAfterContentChecked:当Angular检查完那些投影到自己视图中的外来内容的数据绑定之后调用。
ngAfterViewInit:在Angular创建完组件的视图后调用。
ngAfterViewChecked:在Angular检查完组件视图中的绑定后调用。

生命周期的顺序

  • ngOnChanges:当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在ngOnInit之前。
  • ngOnInit:在第一轮ngOnChanges完成之后调用。
  • ngDoCheck:在每个Angular变更检测周期中调用。
  • ngAfterContentInit:当把内容投影进组件之后调用。
  • ngAfterContentChecked:每次完成被投影组件内容的变更检测之后调用。
  • ngAfterViewInit:初始化完组件及其子视图之后调用。
  • ngAfterViewChecked:每次做完组件视图和子视图的变更检测之后调用。
  • ngOnDestroy:当Angular每次销毁指令/组件之前调用。

作者:Yeaseon
链接:https://www.jianshu.com/p/8f4c15186d7b
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

Angular2 -- 生命周期的更多相关文章

  1. Angular2 -- 生命周期钩子

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

  2. angular2系列教程(十一)路由嵌套、路由生命周期、matrix URL notation

    今天我们要讲的是ng2的路由的第二部分,包括路由嵌套.路由生命周期等知识点. 例子 例子仍然是上节课的例子:

  3. angular2系列教程(五)Structural directives、再谈组件生命周期

    今天,我们要讲的是structural directives和组件生命周期这两个知识点.structural directives顾名思义就是改变dom结构的指令.著名的内建结构指令有 ngIf, n ...

  4. angular2的生命周期钩子的使用情况

    angular 2 Directive Lifecycleangular2 中组建继承于指令,并扩展了与ui视图相关的属性.angular2 指令的生命周期是用来记录指令从创建,应用及销毁的过程.an ...

  5. Angular2 组件生命周期

    1. 说明 Angular每个组件都存在一个生命周期,从创建,变更到销毁.Angular提供组件生命周期钩子,把这些关键时刻暴露出来,赋予在这些关键结点和组件进行交互的能力. 2. 接口 按照生命周期 ...

  6. angular、angular2、vue的生命周期

    angular生命周期是什么 1.Angular每个组件都存在一个生命周期,从创建,变更到销毁.Angular提供组件生命周期钩子,把这些关键时刻暴露出来,赋予在这些关键结点和组件进行交互的能力,掌握 ...

  7. Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖

    1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...

  8. react组件的生命周期

    写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...

  9. 浅谈 Fragment 生命周期

    版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. Fragment 是在 Android 3.0 中 ...

随机推荐

  1. git常用命令3

    一. Git 常用命令速查 git branch 查看本地所有分支git status 查看当前状态git commit 提交git branch -a 查看所有的分支git branch -r 查看 ...

  2. 在ubuntu英文系统下使用中文输入法

    How to install and use Chinese Input Method in the English Locale in Ubuntu ?(1) Check if there exis ...

  3. Email移动的原理

    1.从数据库中得到被移动邮件的uid: 2.选择移动邮件所属folder,即SelectFolder; 3.调用copymessage(path,vmime::net::messageset::byU ...

  4. HTML基本格式

    <html> <head> <title>放置文章标题</title> <meta http-equiv="Content-Type&q ...

  5. fedora中使用 mariadb数据库建库和建表-- mariadb数据库服务无法启动?

    /proc(进程, 过程等含义) 文件系统是一个虚拟文件系统,通过它可以使用一种新的方法在 Linux® 内核空间(内核)和用户空间(用户)之间进行通信.在 /proc 文件系统中,我们可以将对虚拟文 ...

  6. P1349 广义斐波那契数列(矩阵加速)

    P1349 广义斐波那契数列 题目描述 广义的斐波那契数列是指形如an=pan-1+qan-2的数列.今给定数列的两系数p和q,以及数列的最前两项a1和a2,另给出两个整数n和m,试求数列的第n项an ...

  7. kubernetes 命令记录

    操作基本命令:   通过yaml文件创建: kubectl create -f xxx.yaml (不建议使用,无法更新,必须先delete) kubectl apply -f xxx.yaml (创 ...

  8. MOOC_Java进阶_翁恺讲_第三周题

    package mooc_java进阶_d3周题; /** * 没有使用HashMap */ import java.util.ArrayList; import java.util.Scanner; ...

  9. ZOJ 3869 Ace of Aces

    There is a mysterious organization called Time-Space Administrative Bureau (TSAB) in the deep univer ...

  10. C# 获取文件夹下的所有文件夹及其文件

    //获得当前文件夹下所有文件夹 string path = "D://文件夹"; string[] dirstr = Directory.GetDirectories(path); ...