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

constructor和OnInit的区别和适用场景

1、区别

    1.1 constructor

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

    1.2 ngOnInit

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

 

2、适用场景

     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中应该只进行依赖注入而不是进行真正的业务操做。