浅谈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 相关文章推荐
JavaScript 三种不同位置代码的写法
Oct 25 Javascript
javascript getElementsByClassName实现代码
Oct 11 Javascript
Javascript 面向对象(三)接口代码
May 23 Javascript
js onclick事件传参讲解
Nov 06 Javascript
js实现全屏漂浮广告移入光标停止移动
Dec 02 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
Jul 10 Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
详解基于vue-cli优化的webpack配置
Nov 06 Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 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
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
关于全局变量和局部变量的那些事
2013/01/11 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
python自然语言编码转换模块codecs介绍
2015/04/08 Python
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
Python重新加载模块的实现方法
2018/10/16 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
通过python爬虫赚钱的方法
2019/01/29 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
python反转列表的三种方式解析
2019/11/08 Python
TensorFlow——Checkpoint为模型添加检查点的实例
2020/01/21 Python
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
药学专业大学生个人的自我评价
2013/11/04 职场文书
高中生自我评价个人范文
2013/11/09 职场文书
QA工程师岗位职责
2013/11/20 职场文书
学生操行评语大全
2014/04/24 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
邀请函范文
2015/02/02 职场文书
公司搬迁通知
2015/04/20 职场文书
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python
深入理解 Golang 的字符串
2022/05/04 Golang