ฮุก ngOnInit ใน Angular

ฮุก ngOnInit จะทำงานเมื่อ เริ่มต้นคอมโพเนนต์ การทำงานของมัน คล้ายกับคอนสตรัคเตอร์ของคลาส แต่ในฮุกนี้สามารถ ทำงานที่ซับซ้อนกว่าได้ เช่น การโหลดข้อมูลจากเซิร์ฟเวอร์

มาดูกันว่าต้องใช้ฮุกนี้อย่างไร เริ่มแรกจำเป็นต้องนำเข้า Interface ของมัน:

app/user/user.component.tsimport { OnInit } from '@angular/core';

ต่อไปต้องรวม Interface เข้าไปในคลาส คอมโพเนนต์:

app/user/user.component.tsexport class UserComponent implements OnInit {

}

หลังจากนั้นเราจะสามารถเขียนเมธอด ngOnInit ภายในคลาส คอมโพเนนต์ได้ และ เมธอดนี้จะทำงานโดยอัตโนมัติเมื่อ เริ่มต้นคลาส มาทดสอบการทำงานของมัน:

app/user/user.component.tsexport class UserComponent implements OnInit {
  constructor() {
    console.log('constructor is started');
  }
  ngOnInit() {
    console.log('onInit is applied');
  }
}