浅谈angular4生命周期钩子


Posted in Javascript onSeptember 05, 2017

理解

Angular提供了生命周期钩子,把这些关键生命时刻暴露出来,赋予我们在它们发生时采取行动的能力。可以将钩子函数理解为在合适的时候做合适的事情。

钩子函数

ng4主要提供了8个钩子函数:

1、ngOnchanges

@input属性(输入属性)发生变化时,会调用。非此属性,不会调用。

当输入属性为对象时,当对象的属性值发生变化时,不会调用,当对象的引用变化时会触发。

先于ngOnInit调用。

2、ngOnInit

只执行一次,dom操作可放在其中。(最常用)

3、NgDocheck

每次发生变更检测时会被调用

ngDoCheck() 是Angular中的变更检测机制.它由 zone.js 来实现的.其行为是只要你的Angular中的某个组件发生异步事件.就会检查整个组件树,以保证组件属性的变化或页面的变化是同步的.所以 ngDoCheck() 的触发相当频繁的.并且是我们无法预料到的.也许我们在页面上的一个无意识操作,就会触发几个甚至几十个的 ngDoCheck() 生命周期钩子.

4、ngAfterContentInit

在组件内容初始化之后调用

5、ngAfterContentChecked

内容投影:父组件写在子标签之间的内容会被渲染到子模板的ng-content中去,类似vue的slot

组件及子组件每次检查内容时调用

当父子组件都有该钩子时,父组件先执行。

6、ngAfterViewInt

组件相应的视图初始化之后调用

7、ngAfterViewChecked

组件及子组件每次检查视图时调用

当父子组件都有该钩子时,子组件先执行。

ngAfterViewChecked与ngAfterViewInt中不允许修改绑定的属性(@input属性),否则抛出异常

8、ngOnDestory

销毁,事件解绑。

3.执行顺序

父组件:

组件模板

<div class="panel-body">
 <input type="text" [(ngModel)]="name">
 {{name}}
  <son [name]="name"></son>
</div>

组件

@Component({
 selector: 'father',
 templateUrl: './father.component.html',
 styleUrls: ['./father.component.scss']
})
export class FatherComponent implements OnInit {
 public name:string;
 constructor() { }
 ngOnInit() {
 console.log("父组件ngOninit");
 }
 ngOnchanges(){
 console.log("父组件ngonchanges");
 }
 ngDoCheck (){
 console.log("父组件ngDocheck")
 }
 ngAfterContentInit(){
 console.log("父组件ngAfterContentInit")
 }
 ngAfterContentChecked(){
 console.log("父组件ngAfterContentChecked")
 }
 ngAfterViewInit(){
 console.log("父组件ngAfterViewInit")
 }
 ngAfterViewChecked(){
 console.log("父组件ngAfterViewChecked")
 }
}

子组件

@Component({
 selector: 'son',
 templateUrl: './son.component.html',
 styleUrls: ['./son.component.scss']
})
export class SonComponent implements OnInit {
 @Input() name:string;
 constructor() { }

 ngOnInit() {
 console.log("子组件ngOninit");
 }
 ngOnChanges (){
 console.log("子组件ngonchanges");
 }
 ngDoCheck (){
 console.log("子组件ngDocheck")
 }
 ngAfterContentInit(){
 console.log("子组件ngAfterContentInit")
 }
 ngAfterContentChecked(){
 console.log("子组件ngAfterContentChecked")
 }
 ngAfterViewInit(){
 console.log("子组件ngAfterViewInit")
 }
 ngAfterViewChecked(){
 console.log("子组件ngAfterViewChecked")
 }
 
}

看打印结果:

浅谈angular4生命周期钩子

当在父组件的input中输入内容时,会打印如下结果:

浅谈angular4生命周期钩子

看到有人说只有当使用内容投影时才会调用ngAfterConentChecked,当上面的里面的代码很显然是没用ng-content的,不知道该怎么解释这个ngAfterConentChecked。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery学习2 选择器的使用说明
Feb 07 Javascript
js网页侧边随页面滚动广告效果实现
Apr 14 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 Javascript
js获取iframe中的window对象的实现方法
May 20 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 22 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 Javascript
webpack踩坑之路图片的路径与打包
Sep 05 #Javascript
js实现鼠标跟随运动效果
Aug 02 #Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 #Javascript
javascript观察者模式实现自动刷新效果
Sep 05 #Javascript
js使用generator函数同步执行ajax任务
Sep 05 #Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 #Javascript
详解Vue2.0 事件派发与接收
Sep 05 #Javascript
You might like
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
提升PHP执行速度全攻略(下)
2006/10/09 PHP
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
js获取当前路径的简单示例代码
2014/01/08 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
利用npm 安装删除模块的方法
2018/05/15 Javascript
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
[01:05:30]VP vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
详解Python中的正则表达式的用法
2015/04/09 Python
Python字符串详细介绍
2015/05/09 Python
Python使用django获取用户IP地址的方法
2015/05/11 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
Python实现AI换脸功能
2020/04/10 Python
如何完美的建立一个python项目
2020/10/09 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
大专生的学习自我评价
2013/12/04 职场文书
教师党员思想汇报
2014/01/06 职场文书
生产部厂长职位说明书
2014/03/03 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
安全生产工作汇报
2014/10/28 职场文书
党员民主生活会材料
2014/12/15 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
2015年重阳节主持词
2015/07/04 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers