浅谈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分页插件
Aug 28 Javascript
jQuery实现textarea自动增长宽高的方法
Dec 18 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
微信小程序3种位置API的使用方法详解
Aug 05 Javascript
Node.js API详解之 net模块实例分析
May 18 Javascript
vue中template的三种写法示例
Oct 21 Javascript
Vue实现多页签组件
Jan 14 Vue.js
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
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
bootstrap实现图片自动轮播
2016/12/21 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
深入讲解Python中的迭代器和生成器
2015/10/26 Python
浅析Python中else语句块的使用技巧
2016/06/16 Python
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
python设置环境变量的作用和实例
2019/07/09 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
python实现低通滤波器代码
2020/02/26 Python
python实现超级玛丽游戏
2020/03/18 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
Linux文件系统类型
2012/09/16 面试题
企业行政文员岗位职责
2013/12/03 职场文书
电子专业毕业生自我鉴定
2014/01/22 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
跳蚤市场口号
2014/06/13 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书
教师自查自纠材料
2014/10/14 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
《黄道婆》教学反思
2016/02/22 职场文书