收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > JavaScript技巧 > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

Angular2生命周期钩子函数的详细介绍

Angular每个组件都存在一个生命周期,从创建,变更到销毁。Angular提供组件生命周期钩子,把这些关键时刻暴露出来,赋予在这些关键结点和组件进行交互的能力,掌握生命周期,可以让我们更好的开发Angular应用

概述

每个接口都有唯一的一个钩子方法,它们的名字是由接口名再加上ng前缀构成的。比如,OnInit接口的钩子方法叫做ngOnInit, Angular在创建组件后立刻调用它

查看图片

生命周期执行顺序

ngOnChanges

在有输入属性的情况下才会调用,该方法接受当前和上一属性值的SimpleChanges对象。如果有输入属性,会在ngOnInit之前调用。

ngOnInit

在组件初始化的时候调用,只调用一次,在第一次调用ngOnChanges之后调用

ngDoCheck

在组件定义的属性或方法变更时调用(用于脏值之检测,非常耗性能,因为会把所有的属性和方法都检测一遍),会在ngOnChanges()和ngOnInit()之后

ngAfterContentInit

在组件内容初始化之后调用,在第一次ngDoCheck之后调用,只调用一次

ngAfterContentChecked

在组件每次检查内容放生变更时调用。在ngAfterContentInit和每次ngDoCheck之后调用

ngAfterViewInit

在组件相应的视图初始化之后调用,第一次ngAfterContentChecked之后调用,只调用一次

ngAfterViewChecked

在组件每次检查视图发生变更时调用。ngAfterViewInit和每次ngAfterContentChecked之后调用。

ngOnDestroy

在组件销毁前调用,做一些清理工作,比如退订可观察对象和移除事件处理器,以免导致内存泄漏。

查看图片

上面代码书写是按顺序的,看下面控制台打印

查看图片

现在我们钩子函数的顺序打乱,在看看代码

查看图片

控制台输出跟上面是一样的

查看图片

constructor和ngOnInit

constructor是ES6中class中新增的属性,当class类实例化的时候调用constructor,来初始化类。Angular中的组件就是基于class类实现的,在Angular中,constructor用于注入依赖。

查看图片

ngOnInit是Angular中生命周期的一部分,在constructor后执行。在Angular中用于初始化变量和数据绑定等

查看图片

NgChanges

当我们监听了OnChanges钩子。 一旦检测到该组件(或指令)的输入属性发生了变化,Agular就会调用ngOnChanges()方法

查看图片

效果演示

查看图片

DoCheck

当组件中属性或函数发生变化时DoCheck会执行脏值检测,遍历所有变量

查看图片

效果演示

查看图片

个人学习心得,大神路过,不喜勿喷😊,如果代码有错误,欢迎纠正同时也欢迎交流

感谢阅读,希望能帮助到大家,也希望大家多多支持积木网!

在Vue中使用echarts的实例代码(3种图)
前言公司的项目中需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts,在vue的生态系统中已经有实现好的vue-echarts,但

angular学习之从零搭建一个angular4.0项目
话说现在angular更新迭代太快了,从前几年用angular版本去搭建项目时还是1.x版本,到现在都已经是angular4.0了(直接跳过了3.0),由于公司要求用到angular4

vue音乐播放器插件vue-aplayer的配置及其使用实例详解
昨天在vue的官网上看到vue-aplayer这个音乐播放器的插件,由于个人有比较喜欢音乐,所以就拿过来玩一玩,感觉还是比较实用的,界面美观。首先,我们

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号