สิ่งที่ต้องรู้เกี่ยวกับ Angular Lifecycle Hooks

ในบทความนี้ เราจะเจาะลึกคำศัพท์ที่เกี่ยวข้องกับ Lifecycle Hooks ทั้งหมดใน Angular พร้อมสรุป

Angular Lifecycle Hooks คืออะไร?

Lifecycle Hooks เป็นชุดของ Method ที่ Angular เรียกใช้งานในแต่ละช่วงของวงจรชีวิตของ Component หรือ Directive ตั้งแต่การสร้าง (Creation) ไปจนถึงการทำลาย (Destruction) โดย Lifecycle Hooks เหล่านี้ช่วยให้นักพัฒนาสามารถจัดการกับสถานะต่าง ๆ ของ Component ได้อย่างเหมาะสม

---

รายชื่อ Angular Lifecycle Hooks พร้อมการใช้งาน

1. ngOnChanges(changes: SimpleChanges)

• เรียกใช้เมื่อ: มีการเปลี่ยนแปลงค่าของ @Input properties
• การใช้งาน: ใช้ตรวจสอบค่าที่เปลี่ยนไปก่อนที่จะ Render ใหม่
• ตัวอย่าง:

    ngOnChanges(changes: SimpleChanges) {
      console.log('Changes:', changes);
    }

2. ngOnInit()

• เรียกใช้เมื่อ: Component ถูกสร้างเสร็จสมบูรณ์หลังจาก ngOnChanges ครั้งแรก
• การใช้งาน: ใช้สำหรับการตั้งค่าเริ่มต้น เช่น การดึงข้อมูลจาก API
• ตัวอย่าง:

    ngOnInit() {
      console.log('Component Initialized');
    }

3. ngDoCheck()

• เรียกใช้เมื่อ: Angular ทำการตรวจสอบการเปลี่ยนแปลง
• การใช้งาน: ใช้สำหรับตรวจสอบการเปลี่ยนแปลงแบบกำหนดเอง
• ตัวอย่าง:

    ngDoCheck() {
      console.log('Change Detection Triggered');
    }

4. ngAfterContentInit()

• เรียกใช้เมื่อ: เนื้อหา ถูกแทรกและเริ่มต้นเรียบร้อยแล้ว
• การใช้งาน: ใช้สำหรับตรวจสอบหรือเตรียมการหลังจากเนื้อหา ถูก Render
• ตัวอย่าง:

    ngAfterContentInit() {
      console.log('Content Initialized');
    }

5. ngAfterContentChecked()

• เรียกใช้เมื่อ: Angular ตรวจสอบเนื้อหา แล้วเสร็จ
• การใช้งาน: ใช้เพื่อตรวจสอบสถานะหลังจากที่เนื้อหาถูกตรวจสอบ
• ตัวอย่าง:

    ngAfterContentChecked() {
      console.log('Content Checked');
    }

6. ngAfterViewInit()

• เรียกใช้เมื่อ: View ของ Component ถูก Render และ Initialize แล้ว
• การใช้งาน: ใช้สำหรับตั้งค่าหลังจาก View ถูก Render เสร็จ
• ตัวอย่าง:

    ngAfterViewInit() {
      console.log('View Initialized');
    }

7. ngAfterViewChecked()

• เรียกใช้เมื่อ: Angular ตรวจสอบ View ของ Component แล้ว
• การใช้งาน: ใช้สำหรับตรวจสอบสถานะหลังจาก View Render เสร็จ
• ตัวอย่าง:

    ngAfterViewChecked() {
      console.log('View Checked');
    }

8. ngOnDestroy()

• เรียกใช้เมื่อ: Component หรือ Directive กำลังจะถูกทำลาย
• การใช้งาน: ใช้สำหรับล้างข้อมูล เช่น ยกเลิก Subscriptions หรือ Clear Resources
• ตัวอย่าง:

        ngOnDestroy() {
          console.log('Component Destroyed');
        }

---

ลำดับเหตุการณ์ใน Lifecycle

1. ngOnChanges: เรียกทุกครั้งที่มีการเปลี่ยนแปลงค่าของ @Input
2. ngOnInit: เรียกครั้งเดียวเมื่อ Component ถูกสร้างเสร็จ
3. ngDoCheck: เรียกทุกครั้งที่ Angular ทำ Change Detection
4. ngAfterContentInit: เรียกครั้งเดียวหลังจาก ถูก Initialize
5. ngAfterContentChecked: เรียกทุกครั้งหลัง Angular ตรวจสอบ
6. ngAfterViewInit: เรียกครั้งเดียวหลังจาก View และ Child Views ถูก Initialize
7. ngAfterViewChecked: เรียกทุกครั้งหลัง Angular ตรวจสอบ View และ Child Views
8. ngOnDestroy: เรียกครั้งเดียวเมื่อ Component กำลังจะถูกทำลาย

---

การใช้งานในโค้ด

import { Component, OnInit, OnChanges, SimpleChanges, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-lifecycle-demo',
  templateUrl: './lifecycle-demo.component.html',
  styleUrls: ['./lifecycle-demo.component.css']
})
export class LifecycleDemoComponent implements OnInit, OnChanges, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy {

  ngOnChanges(changes: SimpleChanges) {
    console.log('ngOnChanges:', changes);
  }

  ngOnInit() {
    console.log('ngOnInit: Component Initialized');
  }

  ngDoCheck() {
    console.log('ngDoCheck: Change Detection Triggered');
  }

  ngAfterContentInit() {
    console.log('ngAfterContentInit: Content Initialized');
  }

  ngAfterContentChecked() {
    console.log('ngAfterContentChecked: Content Checked');
  }

  ngAfterViewInit() {
    console.log('ngAfterViewInit: View Initialized');
  }

  ngAfterViewChecked() {
    console.log('ngAfterViewChecked: View Checked');
  }

  ngOnDestroy() {
    console.log('ngOnDestroy: Component Destroyed');
  }
}

---

สรุป

Angular Lifecycle Hooks ช่วยให้คุณสามารถจัดการและควบคุมสถานะต่าง ๆ ของ Component ในแต่ละช่วงของวงจรชีวิตได้อย่างมีประสิทธิภาพ โดยการเรียกใช้ Method ที่เหมาะสมในแต่ละช่วงเวลา หวังว่าบทความนี้จะช่วยเพิ่มความเข้าใจในการใช้งาน Lifecycle Hooks และนำไปใช้ในโปรเจกต์ของคุณได้อย่างมีประสิทธิภาพ!