Angular中的ngOnInit Hook和construct

constructor是ES6中类中的构造函数，在angular中，组件页面都是通过写在export class someComponent { }中完成的，因此每个类中都会有一个constructor构造函数，在使用Angular框架的时候，经常会迷惑到底何时使用constructor，何时使用ngOnInit生命周期钩子函数？

• Angular中的生命周期的执行顺序如下：
  1、ngOnChanges - 当数据绑定输入属性的值发生变化时调用
  2、ngOnInit - 在第一次 ngOnChanges 后调用
  3、ngDoCheck - 自定义的方法，用于检测和处理值的改变
  4、ngAfterContentInit - 在组件内容初始化之后调用
  5、ngAfterContentChecked - 组件每次检查内容时调用
  6、ngAfterInit - 组件相应的视图初始化之后调用
  7、ngAfterViewChecked - 组件每次检查视图时调用
  8、ngOnDestroy - 指令销毁前调用

ngOnInit一般用于组件初始化，这个钩子函数在ngOnChanges之后执行

• constructor的使用：

constructor使用时一般是当这个组件被注册的时候就会执行其中的构造函数，可以对比下面的例子

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <span>{{name}}</span>
  `,
})
export class AppComponent implements OnInit {

  public name:string = '';

  constructor() {
    console.log('constructor初始化');
    this.name = 'Violet';
  }

  ngOnInit() {
    console.log('ngOnInit hook');
  }
}

//  页面渲染的name为Violet
//  打印内容：constructor初始化   then  ngOnInit hook

可以看出，constructor构造函数在组件一注册的时候就执行了，其后才是组件的初始化，意味着有的数据不能放在constructor中去做的，最经典的应用场景就是：父子组件传值的时候，子组件在constructor构造函数中是无法拿到父组件传过来的数据的，因为这个时候组件才刚刚被注册，需要待初始化之后才可以拿到数据。

父组件代码：

import { Component } from '@angular/core';

@Component({
  selector: 'my-parent',
  template: `
    <my-child [pid]="id"></my-child>
  `,
})
export class ParentComponent {
  id:number= 0;

  constructor() {
    this.id= 1;
  }
}

子组件代码：

import { Component, Input, OnInit } from '@angular/core';

@Component({
    selector: 'my-child',
    template: `
     <span>传过来的id：{{ pid }} </span>
    `
})
export class ChildComponent implements OnInit {
    @Input() pid: number; // 传过来的id

    constructor() {
        console.log('constructor构造函数：', this.pid); 
    }

    ngOnInit() {
        console.log('ngOnInit钩子函数：', this.pid);
    }
}

//  打印内容：undefined  then  1

• 应用场景：

构造函数一般用于依赖注入或执行一些简单的初始化操作，把其他的初始化操作放在 ngOnInit 钩子中去执行。如在组件获取输入属性之后，需执行组件初始化操作等。

import { Component, OnInit } from "@angular/core";
import { Http } from "@angular/http";

@Component({
  selector:'my-select',
  template:`<ul>
      <li *ngFor = "let item in data">
          {{ item }}
      </li>
    </ul>`
})

export class CountComponent {
  
  public data = [];


  constructor(private http: Http) {}

  ngOnInit() {
     const url = '接口地址'   
     this.http.get(url).subscribe(res=> {
        this.data = res.retList;
      })
  }

}

(参阅了其他资料)