浅谈angular2 组件的生命周期钩子


Posted in Javascript onAugust 12, 2017

本文介绍了浅谈angular2 组件的生命周期钩子,分享给大家,具体如下:

按照生命周期执行的先后顺序,Angular生命周期接口如下所示

名称 时机 接口 范围
ngOnChanges 当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 ngOnInit之前。 OnChanges 指令和组件
ngOnInit 在第一轮 ngOnChanges 完成之后调用。 ( 译注:也就是说当每个输入属性的值都被触发了一次 ngOnChanges之后才会调用 ngOnInit ,此时所有输入属性都已经有了正确的初始绑定值 ) OnInit 指令和组件
ngDoCheck 在每个 Angular 变更检测周期中调用。 DoCheck 指令和组件
ngAfterContentInit 当把内容投影进组件之后调用。 AfterContentInit 组件
ngAfterContentChecked 每次完成被投影组件内容的变更检测之后调用。 AfterContentChecked 组件
ngAfterViewInit 初始化完组件视图及其子视图之后调用。 after initializing the component's views and child views. AfterViewInit 组件
ngAfterViewChecked 每次做完组件视图和子视图的变更检测之后调用。 AfterViewChecked 组件
ngOnDestroy 当 Angular 每次销毁指令 /组件之前调用。 OnDestroy 指令和组件

生命周期顺序简写

在Angular通过构造函数创建组件/指令时,它调用这些生命周期钩子方法的顺序是:

  • ngOnChanges:在ngOnInit之前,当数据绑定输入属性的值发生变化时。
  • ngOnInit:在第一次ngOnChanges之后。
  • ngDoCheck:每次Angular变化检测时。
  • ngAfterContentInit:在外部内容放到组件内之后。
  • ngAfterContentChecked:在放到组件内的外部内容每次检查之后。
  • ngAfterViewInit:在初始化组件视图和子视图之后。
  • ngAfterViewChecked:在妹子组件视图和子视图检查之后。
  • ngOnDestroy:在Angular销毁组件/指令之前。

除此之外,一些组件还提供了自己的生命周期钩子。例如router有routerOnActivate。

浅谈angular2 组件的生命周期钩子

测试生命周期顺序的代码

import {Component} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';

@Component({
 selector: 'panel',
 inputs: ['title', 'caption'],
 template: '<ng-content></ng-content>'
})
class Panel {
 // 组件输入属性值发生改变(首次调用一定会发生在 ngOnInit之前。)
 ngOnChanges(changes) {
  console.log('On changes', changes);
 }
 // 组件初始化完成(在第一轮 ngOnChanges 完成之后调用。 ( 译注:也就是说当每个输入属性的值都被触发了一次 ngOnChanges 之后才会调用 ngOnInit ,此时所有输入属性都已经有了正确的初始绑定值 ))
 ngOnInit() {
  console.log('Initialized');
  console.warn('OnChanges和DoCheck钩子不要同时出现,互斥!。本例仅供学习');
 }
 // 脏值检测器被调用后调用
 ngDoCheck() {
  console.log('Do check');
 }
 // 组件销毁之前
 ngOnDestroy() {
  console.log('Destroy');
 }
 // 组件-内容-初始化完成 PS:指的是ContentChild或者Contentchildren
 ngAfterContentInit() {
  console.log('After content init');
 }
 // 组件内容脏检查完成
 ngAfterContentChecked() {
  console.log('After content checked');
 }
 // 组件视图初始化完成 PS:指的是ViewChild或者ViewChildren
 ngAfterViewInit() {
  console.log('After view init');
 }
 // 组件视图脏检查完成之后
 ngAfterViewChecked() {
  console.log('After view checked');
 }
}

@Component({
 selector: 'app',
 template: `
  <button (click)="toggle()">Toggle</button>
  <div *ngIf="counter % 2 == 0">
   <panel caption="Sample caption" title="Sample">Hello world!</panel>
  </div>
 `,
 directives: [Panel]
})
class App {
 counter: number = 0;
 toggle() {
  this.counter += 1;
 }
}

bootstrap(App);

输出结果

浅谈angular2 组件的生命周期钩子

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

Javascript 相关文章推荐
js跑步算法的实现代码
Dec 04 Javascript
JS对象转换为Jquery对象示例
Jan 26 Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 Javascript
jquery easyui DataGrid简单示例
Jan 23 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
Node.js开发第三方微信公众平台
Jun 05 Javascript
js用类封装pop弹窗组件
Oct 08 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
Node.js pipe实现源码解析
Aug 12 #Javascript
vue实现移动端图片裁剪上传功能
Aug 18 #Javascript
JavaScript实现图片切换效果
Aug 12 #Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 #Javascript
浅谈angularJS的$watch失效问题的解决方案
Aug 11 #Javascript
EasyUI在Panel上动态添加LinkButton按钮
Aug 11 #Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 #Javascript
You might like
php处理单文件、多文件上传代码分享
2016/08/24 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
js函数的延迟加载实现代码
2012/10/11 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
Python中super函数的用法
2017/11/17 Python
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
python如何删除文件、目录
2020/06/23 Python
车间机修工岗位职责
2014/02/28 职场文书
协议书格式
2014/04/23 职场文书
服装设计专业自荐信
2014/06/17 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
撤诉书怎么写
2015/05/19 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
婚宴领导致辞
2015/07/28 职场文书
新教师教学工作总结
2015/08/14 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
Opencv中cv2.floodFill算法的使用
2021/06/18 Python
Hive常用日期格式转换语法
2022/06/25 数据库