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中應該只進行依賴注入而不是進行真正的業務操做。