浅谈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的一些常用方法小结
Jun 29 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
javascript创建动态表单的方法
Jul 25 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
JavaScript中 DOM操作方法小结
Apr 25 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
浅谈JavaScript浅拷贝和深拷贝
Nov 07 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 设置MySQL连接字符集的方法
2011/01/02 PHP
php实现的漂亮分页方法
2014/04/17 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
PHP中Array相关函数简介
2016/07/03 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
JS实现数组去重方法总结(六种方法)
2017/07/14 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
python 将大文件切分为多个小文件的实例
2019/01/14 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
如何用Python绘制3D柱形图
2020/09/16 Python
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
Pamela Love官网:纽约设计师Pamela Love的精美、时尚和穿孔珠宝
2020/10/19 全球购物
民主评议党员工作总结
2014/10/20 职场文书
2014年保洁工作总结
2014/11/24 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
iPhone13将有八大升级
2021/04/15 数码科技
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python