组件生命周期钩子

指令和组件的实例有一个生命周期:新建、更新和销毁。
每个接口都有唯一的一个钩子方法,它们的名字是由接口名加上 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. Linux基础命令---which

    which 在环境变量PATH中搜索某个命令,返回命令的执行文件或者脚本位置,默认只显示第一个结果.这需要一个或多个参数.对于它的每个参数,它会打印出当在shell提示符下输入该参数时将执行的可执行文 ...

  2. HTML5 -canvas拖拽、移动 绘制图片可操作移动,拖动

    关于canvas 的基础知识就不多说了,可以进这个网址学习 http://www.w3school.com.cn/html5/html_5_canvas.asp 对于canvas 和 SVG 其实一开 ...

  3. win7 安装.Net framework 4.0出现 安装不成功,错误代码0x80240037 的解决方法

    1.安装说明 系统:win7 64位 安装包:dotNetFx40_Full_x86_x64.exe(.Net framework 4.0) 出现的问题:在win7 上安装dotNetFx40_Ful ...

  4. MySQL备份与恢复-innobackupex

    :上一片myloder搞崩溃,为什么百度的博文都是抄袭一模一样的,哎烦! 这一片文章我们来介绍物理备份工具xtracebackup! 首先是安装可以percona官网下载安装,下载rpm包直接yum安 ...

  5. Linux下useradd命令创建的用户不能登录的问题

    Linux下useradd命令创建的用户不能登录的问题  问题: 用useradd命令新创建一个用户tester 密码pwdtest mkdir -p /home/tester(创建文件夹) user ...

  6. 2017.11.11 B201 练习题思路及解题方法

    2017.11.11 B201 练习题思路及解题方法 题目类型及涵盖知识点 本次总共有6道题目,都属于MISC分类的题目,涵盖的知识点有 信息隐藏 暴力破解 音轨,摩斯电码 gif修改,base64原 ...

  7. 20145333茹翔 Exp8 Web基础

    20145333茹翔 Exp8 Web基础 实验问题回答 (1)什么是表单 表单是一个包含表单元素的区域,表单元素是允许用户在表单中(比如:文本域.下拉列表.单选框.复选框等等)输入信息的元素,表单在 ...

  8. Salty Fish 结对学习心得体会及创意照 (20165211 20165208)

    小组结对学习心得体会及创意照 在阅读了软件工程讲义 3 两人合作(2) 要会做汉堡包和现代软件工程讲义 3 结对编程和两人合作后,加之对于这几周组队学习的感悟,我们对于组队学习的一些感悟和想法如下: ...

  9. [noip模拟题]科技节 - 搜索 - 位运算优化

    [问题描述] 一年一度的科技节即将到来.同学们报名各项活动的名单交到了方克顺校长那,结果校长一看皱了眉头:这帮学生热情竟然如此高涨,每个人都报那么多活动,还要不要认真学习了?!这样不行!……于是,校长 ...

  10. 【前端】Vue.js实现网格列表布局转换

    网格列表布局转换 实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>布局转换</title& ...