【Angular 4】组件生命周期钩子
组件生命周期钩子?
指令和组件的实例有一个生命周期:新建、更新和销毁。
每个接口都有唯一的一个钩子方法,它们的名字是由接口名加上 ng 前缀构成的。比如:OnInit接口的钩子方法叫做ngOnInit
如图:红色部分钩子angular只会触发一次,而绿色钩子会触发多次。
一般情况下,如果要实现check钩子,代码一定要非常简洁,和非常轻量级,不然,很容易使内存泄露。
指令和组件?
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每次销毁指令/组件之前调用。
【Angular 4】组件生命周期钩子相关推荐
- vue 子父组件周期顺序_父组件和子组件生命周期钩子执行顺序是什么?
加载页面执行步骤 1.父组件:beforeCreate -> created -> beforeMount 2.子组件:beforeCreate -> created -> b ...
- Vue 封装的组件生命周期钩子
export default {// ...// 在组件初始化时调用,可以简单理解为页面加载时created () {// 存在 localStorage 的缓存内容 if (localStorage ...
- Angular 个人深究(四)【生命周期钩子】
Angular 个人深究(四)[生命周期钩子] 定义: 每个组件都有一个被 Angular 管理的生命周期. Angular 创建它,渲染它,创建并渲染它的子组件,在它被绑定的属性发生变化时检查它,并 ...
- Vue组件生命周期钩子和Vue-Router路由钩子的执行顺序
Vue组件生命周期钩子的执行顺序如下图所示 链接:https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6% ...
- vue- Vue-Cli脚手架工具安装 -创建项目-页面开发流程-组件生命周期-03
目录 本博客环境 Vue-Cli 项目环境搭建 与 python 基础环境对比 环境搭建 创建启动 vue 项目 命令创建项目(步骤小多) 启动 vue 项目(命令行方式) 启动 vue 项目(pyc ...
- angular 生命周期钩子 ngOnInit() 和 ngAfterViewInit() 的区别
angular 生命周期钩子的详细介绍在 https://angular.cn/guide/lifecycle-hooks 文档中做了介绍. ngOnInit() 在 Angular 第一次显示数据 ...
- reactjs组件生命周期:componentWillReceiveProps及新旧版本生命周期钩子函数对比
reactjs组件生命周期:componentWillReceiveProps及新旧版本生命周期钩子函数对比
- Vue多组件切换,并相互传值(在created和mounted生命周期钩子函数中渲染数据的区别)
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>< ...
- vue的组件/data的参数/组件传值/插槽/侦听器/生命周期钩子函数
目录 组件结构 组件的命名规则: 组件的data参数 <font color='red'> 组件的父子传值prop(通信) <font color='red'>组件的子--&g ...
最新文章
- RecyclerView 刷新的时候出现阴影的处理方法
- linux gz bz,linux把文件压缩命令 tar gz bz bz2
- 研究所月入两万,是一种什么体验?
- 职场沟通能力,不是人人都有
- Linux snmp 时间戳,linux snmp计数器汇总
- magento添加面包屑
- 知道cve编号怎么搜poc_想在海南买房不知道该怎么选?快来看看这些热搜楼盘吧!...
- 高通发布《5G经济》研究:将催生12万亿美元市场
- pthread_join()函数理解实验
- es统计有多少个分组_ElasticSearch 分组查询的几个例子
- 台式计算机拆机步骤ppt,三相异步电动机拆装的方法和步骤.PPT
- 在Vmware安装wes 7
- windows设置定时任务并运行python脚本(windows任务计划)
- 骂百度的人为何那么多
- canvas多彩粒子星空背景
- 异贝,移动互联网技术,为中小微实体企业联盟、线上链接、线上线下自定义营销方案推送。案例42
- 篮球与计算机技术,浅析计算机技术应用对高校篮球教学的作用与影响
- Unity(如何把方形图片整成圆形)
- Apache Spark 3.0 结构化Streaming流编程指南
- 解读2022中国城市大脑首批三项标准(新版)
热门文章
- shell命令locate
- 【转】粒子群算法----粒子群算法简介
- ibatis返回结果映射到HashMap时,列名无效的问题
- 【恋上数据结构】图代码实现、最小生成树(Prim、Kruskal)、最短路径(Dijkstra、Bellman-Ford、Floyd)
- Web渗/透/攻/击实战(1)—成功渗/透台湾某净化设备公司官网
- django进阶06数据库事务
- 移动端切图内容包括什么_ios移动端切图及前端规范
- linux关闭io统计,linux 统计每个进程所占用的io数
- 力扣 剑指 Offer 10- I. 斐波那契数列
- 牛客寒假算法基础训练营3