浅谈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 相关文章推荐
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
Jul 28 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 Javascript
bootstrap实现tab选项卡切换
Aug 09 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
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
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
thinkPHP分页功能实例详解
2017/05/05 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
vue-for循环嵌套操作示例
2019/01/28 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
Python实现处理管道的方法
2015/06/04 Python
itchat接口使用示例
2017/10/23 Python
python爬虫基本知识
2018/03/05 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
详解Python文件修改的两种方式
2019/08/22 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
写给保洁员表扬信
2014/01/08 职场文书
应届毕业生自荐信
2015/03/04 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
OpenCV实现普通阈值
2021/11/17 Java/Android