组件生命周期钩子

指令和组件的实例有一个生命周期:新建、更新和销毁。
每个接口都有唯一的一个钩子方法,它们的名字是由接口名加上 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. ES6学习--对象属性的可枚举性( enumerable)

    可枚举性(enumerable)用来控制所描述的属性,是否将被包括在for...in循环之中.具体来说,如果一个属性的enumerable为false,下面三个操作不会取到该属性.* for..in循 ...

  2. Python入门之Python引用模块和查找模块路径

    #这篇文章主要介绍了Python引用模块和Python查找模块路径的相关资料,需要的朋友可以参考下 模块间相互独立相互引用是任何一种编程语言的基础能力.对于“模块”这个词在各种编程语言中或许是不同的, ...

  3. spring mvc @ModelAttribute 每次执行requestmapping前自动执行

    在不少应用场景中,我们希望在每次执行requestmapping前自动执行一些操作,比如把某些数据(比如数据字典.系统配置.标准错误号,这在企业应用系统中极为常见)塞到model中供view访问,因为 ...

  4. Python3基础 if嵌套示例

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  5. Go第四篇之流程控制

    流程控制是每种编程语言控制逻辑走向和执行次序的重要部分,流程控制可以说是一门语言的“经脉”. Go 语言的常用流程控制有 if 和 for,而 switch 和 goto 主要是为了简化代码.降低重复 ...

  6. bzoj1055 ||P4290 [HAOI2008]玩具取名

    目录 链接 思路 代码 链接 luogu bzoj 思路 区间dp 然后\(f[i][j][k]\) 区间\([i,j]\)能否变成\(k\)字符 (字符当然得转化一下) 字符的个数不多,直接暴力\( ...

  7. Is it bad to rely on foreign key cascading? 外键 级联操作

    Is it bad to rely on foreign key cascading? I'll preface前言 this by saying that I rarely delete rows ...

  8. 【第十六章】 springboot + OKhttp + String.format

    模拟浏览器向服务器发送请求四种方式: jdk原生的Http包下的一些类 httpclient(比较原始,不怎么用了):第一章 HttpClient的使用 Okhttp(好用,推荐) retrofit( ...

  9. Unity3D学习笔记(八):四元素和书籍推荐

    书籍推荐: 3D数学基础:图形与游戏开发——游戏软件开发专家系列(美)邓恩 Unity Shader入门精要 冯乐乐(92年) 数据结构(Python语言描述) 数据结构.算法与应用(C++语言描述) ...

  10. ASP.NET MVC & Web API项目中集成MEF

    1.实现方式 //WebApi需要实现的接口 System.Web.Http.Dependencies.IDependencyResolver //MVC需要实现的接口 System.Web.Mvc. ...