angular2-生命周期钩子函数
生命周期的顺序
当Angular使用构造函数新建一个组件或指令后,就会按下面的顺序在特定时刻调用这些生命周期钩子方法:
|
钩子 |
目的和时机 |
|---|---|
ngOnChanges() |
当Angular(重新)设置数据绑定输入属性时响应。 该方法接受当前和上一属性值的 当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 |
ngOnInit() |
在Angular第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。 在第一轮 |
ngDoCheck() |
检测,并在发生Angular无法或不愿意自己检测的变化时作出反应。 在每个Angular变更检测周期中调用, |
ngAfterContentInit() |
当把内容投影进组件之后调用。 第一次 只适用于组件。 |
ngAfterContentChecked() |
每次完成被投影组件内容的变更检测之后调用。
只适合组件。 |
ngAfterViewInit() |
初始化完组件视图及其子视图之后调用。 第一次 只适合组件。 |
ngAfterViewChecked() |
每次做完组件视图和子视图的变更检测之后调用。
只适合组件。 |
ngOnDestroy |
当Angular每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器,以防内存泄漏。 在Angular销毁指令/组件之前调用。 |
angular2-生命周期钩子函数的更多相关文章
- vue之生命周期钩子函数之运用
一.什么是生命周期钩子函数: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行 ...
- 关于 vue 生命周期 钩子函数 事件
vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染->更新->渲染.卸载等一系列过程,我们称这是vue的生命周期. 通俗的将就是vue实例从创建到销毁 ...
- Vue生命周期 钩子函数和组件传值
Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...
- 对vue生命周期/钩子函数的理解
对于实现页面逻辑交互等效果,我们必须知晓vue的生命周期,才能愉快的玩耍,知道我们写的东西应该挂载到哪里,vue官方给出的api讲解的那叫一个简单啊,如下: 所有的生命周期钩子自动绑定this上下文到 ...
- vue生命周期 钩子函数
首先,1.x和2.x的生命周期钩子对比: 钩子函数的树状图,红色的是我们可以利用的函数,绿色的是函数解析,蓝色的是函数执行时机 <!DOCTYPE html> <html> & ...
- Vue 2.0 生命周期-钩子函数理解
Vue 2.0 + 生命周期钩子在项目过程中经常用到,所以闲下来整理了下,直接复制下面的实例运行: <!DOCTYPE html> <html lang="en" ...
- 了解angularjs中的生命周期钩子函数$onInit,$onChange,$onDestory,$postLink
壹 ❀ 引 我在前面花了三篇文章用于介绍angularjs的指令directive,组件component,并专门花了一篇文章介绍directive与component的不同,其中提到在compon ...
- 什么是vue生命周期和生命周期钩子函数?
原文地址 vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩 ...
- VueAPI 2 (生命周期钩子函数)
所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法. beforeCreate 在实例初始化之后,此时还不 ...
- Angular2 -- 生命周期钩子
组件生命周期钩子 指令和组件的实例有一个生命周期:新建.更新和销毁. 每个接口都有唯一的一个钩子方法,它们的名字是由接口名加上 ng前缀构成的.比如,OnInit接口的钩子方法叫做ngOnInit. ...
随机推荐
- 【智能算法】迭代局部搜索(Iterated Local Search, ILS)详解
迭代局部搜索(Iterated Local Search, ILS) 源代码下载请关注微信公众号[程序猿声],在后台回复:[ILS],不包括[]即可下载. 00 目录 局部搜索算法 简单局部搜索 迭代 ...
- [Maven]Codehaus的Maven Repository地址
In ~/.m2/settings.xml you can update the URL to be used for specific repositories. For example: < ...
- bytes和str之间的转换
1.方法:decode解码(二进制转换成字符串) encode与上相反
- rest-assured之静态导入及简单使用实例
一.静态导入 为了有效的使用rest-assured,官网推荐从下列class中静态导入方法: io.restassured.RestAssured.* io.restassured.matcher. ...
- scrapy框架之(CrawlSpider)
一.CrawlSpider简介 如果想要通过爬虫程序去爬取”糗百“全站数据新闻数据的话,有几种实现方法? 方法一:基于Scrapy框架中的Spider的递归爬取进行实现(Request模块递归回调pa ...
- 使用electron构建跨平台Node.js桌面应用经验分享
by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=6154 本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处,摘要引流则随 ...
- PIE SDK专题制图下地图的的操作
1. 功能简介 制图模式和地图模式下用的地图是同一份地图,那么在制图模式下如果需要对地图进行操作(例如地图的拉框放大,缩小),那么该如何操作呢,地图范围视图变化在制图模式下该如何监听呢,下面主要 ...
- 采用MQTT协议实现android消息推送(2)MQTT服务端与客户端软件对比、android客户端示列表
1.服务端软件对比 https://github.com/mqtt/mqtt.github.io/wiki/servers 名称(点名进官网) 特性 简介 收费 支持的客户端语言 IBM MQ 完整的 ...
- 可编辑的el-table表格,结合input输入,upload文件上传的表格
最近整理了一下,table表格的编辑状态,把一般表格里需要输入的类型都放进来了,实现的功能如图 这里面的input输入框没什么好说的,绑定对应的值就可以,要注意的是组件上传的upload,这个 ...
- oracle 日志文件
--Oracel Grid 11.2的Agent有多个,其中有两个最重要:orarootagent.oraagent --它们有各自的日志文件,这些Agent的日志文件位于: $grid_home/l ...