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 ...
随机推荐
- bootstrap table 学习记录
效果: html代码: <!-- 工具容器 --> <div id="toolbar" class="btn-group"> <b ...
- input[checkbox],input[radiobox]的一些问题
复选框和文字对不齐:checkbox复选框的一些深入研究与理解: 解决方案:复选框或单选框与文字对齐的问题的深入研究与一 实例:实例.
- JavaScript高级程序设计第三版-读书笔记(1-3章)
这是我第一次用markdown,也是我第一次在网上记录我自己的学习过程. 第一章 JavaScript主要由以下三个不同的部分构成 ECMAScript 提供核心语言功能 DOM 提供访问 ...
- Python 简单的方法爬取b站dnf视频封面
import urllib.request cnt=0 def instr(keystr): st=keystr.find('(')+1 strhtml=keystr[st:len(keystr)-1 ...
- Markdown 简单标签语言
Markdownhttps://www.cnblogs.com/ixysy/p/6236782.html Markdown基本语法https://www.jianshu.com/p/191d1e21f ...
- Sort HDU - 5884 哈夫曼权值O(n)
http://acm.hdu.edu.cn/showproblem.php?pid=5884 原来求一次哈夫曼可以有O(n)的做法. 具体是,用两个队列,一个保存原数组,一个保存k个节点合并的数值,然 ...
- ERROR [org.apache.hadoop.util.Shell] - Failed to locate the winutils binary in the hadoop binary path
错误日志如下: -- ::, DEBUG [org.apache.hadoop.metrics2.lib.MutableMetricsFactory] - field org.apache.hadoo ...
- arcgis js 几种拓扑关系详解
arcgis js的拓扑关系,在处理复杂逻辑和分析时,可以通过拓扑关系,减小客户端的工作量 拓扑关系: 1.overlaps 重叠 这里的重叠跟平时我们理解的不太一样,这里的重叠,必须是A与B有交集, ...
- Java的compare比较
package com.jckb; public class Name implements Comparable<Name>{ private String firstName; pri ...
- 记录下laravel 5.2的auth/logout路由工作不正常的问题