详解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.tsimport { 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'; }}