详解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实现给指定元素的后面追加内容
Apr 10 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
jquery中ajax跨域方法实例分析
Dec 18 Javascript
Node.js操作mysql数据库增删改查
Mar 30 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
JS实现弹出居中的模式窗口示例
Jun 20 Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 Javascript
浅谈mint-ui 填坑之路
Nov 06 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
Vue动态创建注册component的实例代码
Jun 14 Javascript
VUE项目中加载已保存的笔记实例方法
Sep 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+DBM的同学录程序(5)
2006/10/09 PHP
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
PHP实现类似于C语言的文件读取及解析功能
2017/09/01 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
[01:43]倾听DOTA2英雄之声 魅惑魔女国服配音鉴赏
2013/06/06 DOTA
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
python实现一个简单的ping工具方法
2019/01/31 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
银行领导证婚词
2014/01/11 职场文书
一月红领巾广播稿
2014/02/11 职场文书
应急管理培训方案
2014/06/12 职场文书
法制教育演讲稿
2014/09/10 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
2015教师节通讯稿
2015/07/20 职场文书
各国货币符号大全
2022/02/17 杂记