Angular constructor和OnInit的区别和适用场景

constructor和OnInit的区别和适用场景

一、区别

    1.1 constructor

            Es6中引入了类的概念，constructor是类中的特殊函数，并不属于Angular的范畴，Angular不能控制constructor，constructor会在类生成实例时自动被调用。

    1.2 ngOnInit

　　　 constructor不受Angular的控制，因此就有了ngOnInit。ngOnInit是Angular生命周期中的一个钩子，ngOnInit的官方解释是：ngOnInit在Angular第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。

 

二、适用场景

     2.1 constructor

　　　 constructor 函数一般用于依赖注入或执行一些简单的初始化操作

import { Component, ElementRef } from '@angular/core';
import{ ActivatedRoute } from '@angular/router';

@Component({
    selector: 'hello',
    templateUrl: './hello.html'
})
class Hello {
    constructor(private activatedRoute:ActivatedRoute) {
        // 在类中就可以使用this.activatedRoute了
    }
}

　　2.2 ngOnInit

　　       ngOnInit 纯粹是通知开发者组件/指令已经被初始化完成了，此时组件/指令上的属性绑定操作以及输入操作已经完成，也就是说在 ngOnInit 函数中我们已经能够操作组件/指令中被传入的数据了。在项目开发中，我们要尽量保证 constructor 函数的简洁明了，contructor 只做数据的简单初始化和依赖注入。其余的数据初始化操作，例如 组件获取输入属性之后，需执行组件初始化操作等等，都要放在 ngOnInit 中执行。

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

@Component({
    selector: 'hello',
    template: `<p>Hello {{name}}!</p>`
})
class Hello implements OnInit {
    @Input()
    name: string;

    constructor() {
        // constructor中还不能获取到组件/指令中被传入的数据
        console.log(this.name);     // undefined
    }

    ngOnInit() {
        // ngOnInit中已经能够获取到组件/指令中被传入的数据
        console.log(this.name);     // 传入的数据
    }
}

　　

    开发中我们经常在ngOnInit做一些初始化的工作，而这些工作尽量要避免在constructor中进行，constructor中应该只进行依赖注入而不是进行真正的业务操作。