Angular lifecycle hooks สำหรับคอมโพเนนต์คืออะไร?

Question

Accepted Answer

**Lifecycle hooks** คือเมธอดที่ Angular เรียกใช้ในช่วงเวลาที่เฉพาะเจาะจงในชีวิตของคอมโพเนนต์ — การสร้าง การเปลี่ยนแปลง input การเรนเดอร์ และการทำลาย คุณนำไปใช้โดยเพิ่มเมธอด interface ลงในคลาสคอมโพเนนต์ของคุณ

## Hooks หลักตามลำดับ

```ts
import { Component, OnInit, OnDestroy, OnChanges, SimpleChanges } from "@angular/core";

@Component({ ... })
export class MyComponent implements OnInit, OnDestroy, OnChanges {
  ngOnChanges(changes: SimpleChanges) {
    // called when an @Input value changes (before ngOnInit the first time)
  }
  ngOnInit() {
    // called ONCE after the first ngOnChanges — do initialization, fetch data
  }
  ngOnDestroy() {
    // called just before the component is removed — CLEAN UP here
  }
}
```

## ลำดับที่สมบูรณ์

```text
constructor          → DI happens; inputs NOT yet available
ngOnChanges          → when @Input values are set/changed
ngOnInit             → once, after first ngOnChanges ★ (init, fetch data)
ngDoCheck            → every change detection run (custom change detection)
ngAfterContentInit   → projected content (<ng-content>) initialized
ngAfterViewInit      → the component's view + child views ready ★ (access @ViewChild)
ngAfterViewChecked   → after each view check
ngOnDestroy          → before removal ★ (unsubscribe, clear timers)
```

## สามตัวที่คุณใช้บ่อยที่สุด

```ts
ngOnInit() {
  this.userService.getUsers().subscribe(u => this.users = u); // init/fetch — inputs are ready
}
ngAfterViewInit() {
  this.chart.nativeElement.focus(); // the DOM/@ViewChild exists now
}
ngOnDestroy() {
  this.subscription.unsubscribe();   // prevent memory leaks!
  clearInterval(this.timer);
}
```

- **`ngOnInit`** — ตำแหน่งมาตรฐานสำหรับการเริ่มต้นและการดึงข้อมูล (ไม่เหมือนกับ constructor `@Input` ใช้ได้ที่นี่)
- **`ngAfterViewInit`** — เมื่อมีมุมมองของลูกและอ้างอิง `@ViewChild`
- **`ngOnDestroy`** — การทำความสะอาด: ยกเลิกการสมัครจาก Observable ล้างตัวจับเวลา ลบผู้ฟัง

## ทำไม ngOnInit แทน constructor

Constructor ควรทำเพียง DI เท่านั้น inputs ยังไม่ได้ผูกมัดในตอนนั้น `ngOnInit` ทำงานหลังจากที่ Angular ตั้งค่าคอมโพเนนต์และ inputs ของมัน — ตำแหน่งที่เหมาะสมสำหรับตรรกะการเริ่มต้น

## ทำไมจึงสำคัญ

Lifecycle hooks ให้คุณรันตรรกะในเวลาที่เหมาะสม — เริ่มต้นใน `ngOnInit` เข้าถึงมุมมองที่เรนเดอร์แล้วใน `ngAfterViewInit` และสำคัญที่สุดคือ **ทำความสะอาดใน `ngOnDestroy`** (การยกเลิกการสมัครจาก Observable เป็นวิธีที่ #1 เพื่อหลีกเลี่ยงการรั่วไหลหน่วยความจำใน Angular)

การรู้ลำดับและบทบาทของแต่ละ hook เป็นสิ่งที่จำเป็นสำหรับการดึงข้อมูลอย่างถูกต้อง การเข้าถึง DOM และการจัดการทรัพยากร