angular2的生命周期钩子的使用情况
angular 2 Directive Lifecycle
angular2 中组建继承于指令,并扩展了与ui视图相关的属性。
angular2 指令的生命周期是用来记录指令从创建,应用及销毁的过程。
angular2 提供了一系列与指令生命周期相关的钩子,便于我们监控指令生命周期的变化,并执行相关的操作。
指令与组件并有的钩子
1,ngOnChanges:当数据绑定输入属性的值发生变化时调用,主要用于监测组件输入属性的变化
2,ngOnInit:在第一次ngOnChange之后调用,并且只调用一次。主要用于执行组件的其它初始化操作或获取组件输入的属性值。
3,ngDoCheck: 自定义的方法,用于检测和处理值的变化,使用该方法,可以自定义我们的检测逻辑。
8,ngOnDestroy: 指令销毁前调用ngOnDestroy方法。它主要用于执行一些清理操作,比如:移除事件监听,清除定时器。
组件特有的钩子
4,ngAfterContentInit:在组件内容初始化之后调用
5,ngAfterContentChecked:组件每次检查内容时调用
6,ngAfterViewInit: 组件相应的视图初始化时调用
7,ngAfterViewChecked: 组件每次检查视图时调用
构造函数 constructor 组件的构造函数会在所有的生命周期钩子之前调用,它主要用于依赖注入(注入service)或执行简单的数据初始化操作
比如使用primeng的picklist 组建时就需要先在ngOnInit中初始化两个空数组
angular2的生命周期钩子的使用情况的更多相关文章
- Angular2 -- 生命周期钩子
组件生命周期钩子 指令和组件的实例有一个生命周期:新建.更新和销毁. 每个接口都有唯一的一个钩子方法,它们的名字是由接口名加上 ng前缀构成的.比如,OnInit接口的钩子方法叫做ngOnInit. ...
- Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]
前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...
- vue-实例生命周期钩子(不太明白)
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项}) 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要 ...
- 浅析vue实例的生命周期(生命周期钩子)
“每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等” ,在不同的生命周期内会经历不同的钩子函数(生命周期 ...
- Angular4学习笔记(九)- 生命周期钩子简介
简介 Angular 指令的生命周期,它是用来记录指令从创建.应用及销毁的过程.Angular 提供了一系列与指令生命周期相关的钩子,便于我们监控指令生命周期的变化,并执行相关的操作.Angular ...
- vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...
- Angular 5.x 学习笔记(2) - 生命周期钩子 - 暂时搁浅
Angular 5.x Lifecycle Hooks Learn Note Angular 5.x 生命周期钩子学习笔记 标签(空格分隔): Angular Note on cnblogs.com ...
- Angular组件生命周期——生命周期钩子
生命周期钩子介绍: 1.ngOnChange:响应组件输入值发生变化时触发的事件. 2.ngOnInit:用于数据绑定输入属性之后初始化组件,在第一次ngOnChange之后被调用. a. 组件构造后 ...
- vue 生命周期钩子函数
实例中的生命周期钩子可以分为以下8种情况: beforeCreate: 实例刚被创建,vue所有属性都还不存在 created: 实例创建完成,但$el还不存在 beforeMount:挂载之前 mo ...
随机推荐
- 洛谷P2812校园网络【Network of Schools加强版】
题目背景 浙江省的几所\(OI\)强校的神犇发明了一种人工智能,可以\(AC\)任何题目,所以他们决定建立一个网络来共享这个软件.但是由于他们脑力劳动过多导致全身无力身体被\(♂\)掏\(♂\)空,他 ...
- jmeter 签名MD5生成(转)
请求接口需要同时发送签名,签名定义为: 可以看出签名就是把用户的密码 .用户名 和签名key生成一个md5串就可以了 刚好jmeter 有个md5 生成,生成前需要获取name ,password k ...
- EcmaScript学习
1.eval: ts: declare function eval(x: string): any; js: /** @param {*} x @return {Object} */ eval = f ...
- 1101 Quick Sort(25 分
There is a classical process named partition in the famous quick sort algorithm. In this process we ...
- RandomAccesssFileTest
package com.yd.wmsc.util; import java.io.IOException; import java.io.RandomAccessFile; public class ...
- URAL 2080 Wallet
找规律发现只要找到两个相同数字之间,有多少个不同的数字,即为答案. 可以用树状数组离线处理. 坑点是卡有很多张,没用完的情况,后面的卡直接放在哪里, 就是 10 5 1 2 3 4 5 这样 开始数据 ...
- SpringBoot | 第二章:lombok介绍及简单使用
在去北京培训的时候,讲师说到了lombok这个第三方插件包,使用了之后发现,确实是个神奇,避免了编写很多臃肿的且定式的代码,虽然现代的IDE都能通过快捷键或者右键的方式,使用Generate Gett ...
- ASP.NET Core集成微信登录
工具: Visual Studio 2015 update 3 Asp.Net Core 1.0 1 准备工作 申请微信公众平台接口测试帐号,申请网址:(http://mp.weixin.qq.com ...
- codesmith 在安装32位Oracle 客户端问题解决
问题解决办法如下: https://blog.csdn.net/csdn1152789046/article/details/52248669
- KindEditor编辑器使用
KindEditor使用 1)kindeditor默认模式调用 <link rel="stylesheet" href="./KindEditor/themes/d ...