ฮุก ngOnInit ใน Angular

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

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

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

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

export class UserComponent implements OnInit {

}

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

export class UserComponent implements OnInit {
	constructor() {
		console.log('constructor is started');
	}
	ngOnInit() {
		console.log('onInit is applied');
	}
}

สร้างเมธอดส่วนตัว show และ เรียกใช้มันเมื่อเริ่มต้นคอมโพเนนต์