组件生命周期钩子

指令和组件的实例有一个生命周期:新建、更新和销毁。
每个接口都有唯一的一个钩子方法,它们的名字是由接口名加上 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. 什么是公网IP、内网IP和NAT转换?

    搞网络通信应用开发的程序员,可能会经常听到外网IP(即互联网IP地址)和内网IP(即局域网IP地址),但他们的区别是什么? 1.引言 搞网络通信应用开发的程序员,可能会经常听到外网IP(即互联网IP地 ...

  2. 看阿里P9架构师如何向你定义架构及架构师

    架构的定义 先来看看软件架构的普遍定义吧. 一个程序和计算系统软件体系结构是指系统的一个或多个结构.结构中包括软件的构建,构建的外部可见属性以及它们之间的相互关系. 体系结构并非可运行软件.确切的说, ...

  3. Python学习笔记之在Python中实现单例模式

    有些时候你的项目中难免需要一些全局唯一的对象,这些对象大多是一些工具性的东西,在Python中实现单例模式并不是什么难事.以下总结几种方法: 使用类装饰器 使用装饰器实现单例类的时候,类本身并不知道自 ...

  4. PHP_SELF变量解析和重复路径解决

    最近升级PHP到PHP7版本,并重新部署了新的Nginx,启动的时候发现了一个问题,全局变量$_SERVER['PHP_SELF']的值发生了改变,从而影响到代码的功能.因此我们来了解下$_SERVE ...

  5. oracle、Mysql数据库客户端DbVisualizer安装

    原文链接:https://jingyan.baidu.com/article/454316ab675302f7a7c03a9e.html

  6. C#中基于流的XML文件操作笔记

    System.Xml.XmlReader和System.Xml.XmlWriters是两个抽象类,XmlReader提供了对于XML数据的快速,非缓存,只进模式的读取器,XmlWriter表示一个编写 ...

  7. POJ 1236 Network of Schools(tarjan)题解

    题意:一个有向图.第一问:最少给几个点信息能让所有点都收到信息.第二问:最少加几个边能实现在任意点放信息就能传遍所有点 思路:把所有强连通分量缩成一点,然后判断各个点的入度和出度 tarjan算法:问 ...

  8. decimal and double ToString problem

    decimal d2 = 0.0000002500m; Console.WriteLine(d2.ToString()); double d3 = 0.0000002500; Console.Writ ...

  9. url rewrite导致的500.19 0x8007000d

    https://stackoverflow.com/questions/13532447/http-error-500-19-iis-7-5-error-0x8007000d It seems you ...

  10. C++快速输入输出优化

    在这里存一下我的快速输入输出优化 以及写题模板 这里的是$getchar$优化和$putchar$优化,$fread$和$fwrite$暂时咕咕咕 快速输入 这里$define$了一个$I\_int$ ...