constructor和ngOnInit钩子有什么不同？

constructor

constructor（构造函数）是ES6类或TypeScript类中的特殊方法，而不是Angular的方法，主要用来做初始化操作，在进行类实例化操作是，会被自动调用。通过constructor方法并不能使我们知道Angular何时完成了组件的初始化工作。

仅显示constructor方法：

import { Component } @Component({})
class ExampleComponent {
// this is called by the JavaScript engine
// rather than Angular
 constructor(name) {
console.log('Constructor initialised');
this.name = name;
}
}

// internally calls the constructor
let appCmp = new ExampleComponent('AppCmp');
console.log(appCmp.name);

运行以上代码，控制台输出结果：

constructor方法是由JavaScript引擎调用的，而不是Angular，这就是为什么ngOnInit生命周期钩子被创建的原因。

ngOnInit

ngOnInit 是 Angular 2 组件生命周期中的一个钩子，Angular 2 中的所有钩子和调用顺序如下：

ngOnChanges - 当数据绑定输入属性的值发生变化时调用
ngOnInit - 在第一次 ngOnChanges 后调用
ngDoCheck - 自定义的方法，用于检测和处理值的改变
ngAfterContentInit - 在组件内容初始化之后调用
ngAfterContentChecked - 组件每次检查内容时调用
ngAfterViewInit - 组件相应的视图初始化之后调用
ngAfterViewChecked - 组件每次检查视图时调用
ngOnDestroy - 指令销毁前调用

其中 ngOnInit 用于在 Angular 获取输入属性后初始化组件，该钩子方法会在第一次 ngOnChanges 之后被调用。

另外需要注意的是 ngOnInit 钩子只会被调用一次，我们来看一下具体示例：

import { Component,OnInit } @Component({
selector: 'my-app',template: `

Welcome to Angular World

Hello {{name}}

name: string = '';

constructor() {
console.log('Constructor initialization');
this.name = 'Semlinker';
}

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

以上代码运行后，控制台输出结果：

接下来看一个父-子组件传参的例子：

parent.component.ts

import { Component } @Component({
selector: 'exe-parent',template: `

Welcome to Angular World

Hello {{name}}

= constructor() {
this.name = 'Semlinker';
}
}

child.component.ts

import { Component,Input,OnInit } @Component({
selector: 'exe-child',template: 父组件的名称：{{pname}} 
})
export class ChildComponent implements OnInit {
@Input()
pname: string; // 父组件的名称

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

ngOnInit() {
    console.log(</span><span style="color: #800000"&gt;'</span><span style="color: #800000"&gt;ChildComponent ngOnInit</span><span style="color: #800000"&gt;'</span>,<span style="color: #0000ff"&gt;this</span><span style="color: #000000"&gt;.pname);
}

}

以上代码运行后，控制台输出结果：

我们发现在 ChildComponent 构造函数中，是无法获取输入属性的值，而在 ngOnInit 方法中，我们能正常获取输入属性的值。因为 ChildComponent 组件的构造函数会优先执行，当 ChildComponent 组件输入属性变化时会自动触发 ngOnChanges 钩子，然后在调用 ngOnInit 钩子方法，所以在 ngOnInit 方法内能获取到输入的属性。

在 Angular 2 中，构造函数一般用于依赖注入或执行一些简单的初始化操作。

import { Component,ElementRef } @Component({
selector: 'my-app',})
export class AppComponent {
name: string = '';

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

在项目开发中我们要尽量保持构造函数简单明了，让它只执行简单的数据初始化操作，因此我们会把其他的初始化操作放在 ngOnInit 钩子中去执行。如在组件获取输入属性之后，需执行组件初始化操作等。

import { Component,OnInit } @Component({})
class ExampleComponent implements OnInit {
constructor() {}

// called on demand by Angular
 ngOnInit() {
console.log('ngOnInit fired');
}
}

const instance = new ExampleComponent();

// Angular calls this when necessary
instance.ngOnInit();

Angular2 constructor VS ngOnInit

constructor

ngOnInit

Welcome to Angular World

Welcome to Angular World

相关文章