详解Angular 中 ngOnInit 和 constructor 使用场景
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
ngoninit
是angular
中oninit
钩子的实现。用来初始化组件。
angular中生命周期钩子的调用顺序如下:
- ngonchanges -- 当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在ngoninit()之前。
- ngoninit() -- 在angular第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。在第一轮ngonchanges()完成之后调用,只调用一次。
- ngdocheck -- 自定义的方法,用于检测和处理值的改变。
- ngaftercontentinit -- 在组件内容初始化之后调用,只适用于组件
- ngaftercontentchecked -- 组件每次检查内容时调用,只适用于组件
- ngafterviewinit -- 组件相应的视图初始化之后调用,只适用于组件
- ngafterviewchecked -- 组件每次检查视图时调用,只适用于组件
- 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']); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: Extjs4 GridPanel 的几种样式使用介绍
下一篇: vue2.0 自定义日期时间过滤器