详解Angular 中 ngOnInit 和 constructor 使用场景


Posted in Javascript onJune 22, 2017

1. constructor

constructor应该是ES6中明确使用constructor来表示构造函数的,构造函数使用在class中,用来做初始化操作。当包含constructor的类被实例化时,构造函数将被调用。

来看例子:

class AppComponent {
  public name: string;
  constructor(name) {
    console.log('Constructor initialization');
    this.name = name;
  }
}

let appCmp = new AppComponent('AppCmp');  // 这时候构造函数将被调用。
console.log(appCmp.name);

转成ES5代码如下:

var AppComponent = (function () {
  function AppComponent(name) {
    console.log('Constructor initialization');
    this.name = name;
  }
  return AppComponent;  // 这里直接返回一个实例
}());
var appCmp = new AppComponent('AppCmp');
console.log(appCmp.name);

2. ngOnInit

ngOnInitAngularOnInit钩子的实现。用来初始化组件。

Angular中生命周期钩子的调用顺序如下:

  1. ngOnChanges -- 当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在ngOnInit()之前。
  2. ngOnInit() -- 在Angular第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。在第一轮ngOnChanges()完成之后调用,只调用一次。
  3. ngDoCheck -- 自定义的方法,用于检测和处理值的改变。
  4. ngAfterContentInit -- 在组件内容初始化之后调用,只适用于组件
  5. ngAfterContentChecked -- 组件每次检查内容时调用,只适用于组件
  6. ngAfterViewInit -- 组件相应的视图初始化之后调用,只适用于组件
  7. ngAfterViewChecked -- 组件每次检查视图时调用,只适用于组件
  8. ngOnDestroy -- 当Angular每次销毁指令/组件之前调用并清扫。在这儿反订阅可观察对象和分离事件处理器,以防内存泄漏。

在Angular销毁指令/组件之前调用。

了解了这些之后我们来看一个例子:

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'my-app',
 template: `
  <h1>Welcome to Angular World</h1>
 `,
})
export class AppComponent implements OnInit {

 constructor() {
  console.log('Constructor initialization');
 }

 ngOnInit() {
  console.log('ngOnInit hook has been called');
 }
}

这里输出的是:

Constructor initialization
ngOnInit hook has been called

可以看出,constructor的执行是在先的。

那么既然ngOnchanges是输入属性值变化的时候调用,并且ngOnInit是在ngOnchanges执行完之后才调用,而constructor是在组件就实例化的时候就已经调用了,这也就是说,在constructor中我们是取不到输入属性的值的。
所以还是看例子:

// parent.component.ts

import { Component } from '@angular/core';

@Component({
 selector: 'exe-parent',
 template: `
  <h1>Welcome to Angular World</h1>
  <p>Hello {{name}}</p>
  <exe-child [pname]="name"></exe-child>  <!-- 绑定到子组件的属性 -->
 `,
})
export class ParentComponent {
 name: string;

 constructor() {
  this.name = 'God eyes';
 }
}
// child.component.ts

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'exe-child',
  template: `
   <p>父组件的名称:{{pname}} </p>
  `
})
export class ChildComponent implements OnInit {
  @Input()
  pname: string; // 父组件的输入属性

  constructor() {
    console.log('ChildComponent constructor', this.pname); // this.name=undefined
  }

  ngOnInit() {
    console.log('ChildComponent ngOnInit', this.pname); // this.name=God eyes
  }
}

一目了然。

3. 应用场景

看完的上面的部分可以发现,在constructor中不适合进行任何与组件通信类似的复杂操作,一般在constructor中值进行一些简单的初始化工作:依赖注入,变量初始化等。

那么用到组件间通信的方法我们可以放在ngOnInit中去执行,比如异步请求等:

import { Component, ElementRef, OnInit } from '@angular/core';

@Component({
 selector: 'my-app',
 template: `
  <h1>Welcome to Angular World</h1>
  <p>Hello {{name}}</p>
 `,
})
export class AppComponent implements OnInt {
 name: string = '';

 constructor(public elementRef: ElementRef) { // 使用构造注入的方式注入依赖对象
  this.name = 'WXY';          // 执行初始化操作
 }

 ngOnInit() {
  this.gotId = this.activatedRoute.params.subscribe(params => this.articleId = params['id']);
 }
}

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

Javascript 相关文章推荐
js对象转json数组的简单实现案例
Feb 28 Javascript
ECMAScript中函数function类型
Jun 03 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
Jan 26 Javascript
Angular2进阶之如何避免Dom误区
Apr 02 Javascript
js+css实现打字效果
Jun 24 Javascript
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 Javascript
Layui表格监听行单双击事件讲解
Nov 14 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 #jQuery
详解Vue 2.0封装axios笔记
Jun 22 #Javascript
EasyUI中的dataGrid的行内编辑
Jun 22 #Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 #Javascript
vue 请求后台数据的实例代码
Jun 22 #Javascript
深入理解vue.js中的v-if和v-show
Jun 22 #Javascript
vue如何从接口请求数据
Jun 22 #Javascript
You might like
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
JS option location 页面跳转实现代码
2008/12/27 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
JavaScript结合AJAX_stream实现流式显示
2015/01/08 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
js实现一个简易计算器
2020/03/30 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
重命名批处理python脚本
2013/04/05 Python
浅析Python基础-流程控制
2016/03/18 Python
详解Python学习之安装pandas
2019/04/16 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
Python就将所有的英文单词首字母变成大写
2021/02/12 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
精选奢华:THE LIST
2019/09/05 全球购物
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
采购主管的岗位职责
2013/12/17 职场文书
建筑安全生产目标责任书
2014/07/23 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
团委副书记工作总结
2015/08/14 职场文书
2015年高中语文教学总结
2015/08/18 职场文书
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python