Angular之constructor和ngOnInit差异及适用场景

import {Component} from '@angular/core';
@Component({
selector: 'hello-world',
templateUrl: 'hello-world.html'
})
class HelloWorld {
constructor() {
console.log('constructor被调用，但和Angular无关');
}
}
// 生成类实例，此时会调用constructor
new HelloWorld();

import {Component, OnInit} from '@angular/core';
@Component({
selector: 'hello-world',
templateUrl: 'hello-world.html'
})
class HelloWorld implements OnInit {
constructor() {
}

ngOnInit() {
    console.log('ngOnInit被Angular调用');
}

}

import { Component, ElementRef } from '@angular/core';
@Component({
selector: 'hello-world',
templateUrl: 'hello-world.html'
})
class HelloWorld {
constructor(private elementRef: ElementRef) {
// 在类中就可以使用this.elementRef了
}
}

// hello-world.ts
import { Component, Input, OnInit } from '@angular/core';
@Component({
    selector: 'hello-world',
    template: <p>Hello {{name}}!</p>
})
class HelloWorld implements OnInit {
    @Input()
    name: string;
    constructor() {
        // constructor中还不能获取到组件/指令中被传入的数据
        console.log(this.name);     // undefined
    }
    ngOnInit() {
        // ngOnInit中已经能够获取到组件/指令中被传入的数据
        console.log(this.name);     // 传入的数据
    }
}

最初学习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中生命周期钩子的调用顺序如下：

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']);
  }
}