YuShu Hsiao

當我們透過Angular CLI指令產生component的時候，

一開始產生的component.ts 會長這樣

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

@Component({
  selector: 'app-demo2',
  templateUrl: './demo2.component.html',
  styleUrls: ['./demo2.component.css']
})
export class Demo2Component implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

由上面的結構可看到，

預設就會產生一個 建構式:constructor

也會幫我們import OnInit 這個interface，以及實作方法

ngOnInit() {}

 

建構式constructor

在component被建立的時候最先執行的function，

通常我們只會在這邊需告要相依注入(DI)的Service，

如果要初始化 component 的內容，要在ngOnInit() 裡面去初始化，

而不是在 建構式constructor 內，

因為建構式在初始化的時候，父元件(component) 傳來的資料還沒有準備好

例如: 宣告了一個 @Input() item;

這個item 是接受父元件(component)傳來的資料，這時候如果我要在 建構式constructor 裡面使用item的值，就會出現錯誤。

constructor 執行完畢之後，才會執行 ngOnInit(){}

結論:要初始化component內的物件內容，寫在 ngOnInit(){} 內。