tiktok นับยอดวิวยังไง

Component Lifecycle ใน Angular คือวงจรชีวิตของคอมโพเนนต์ Angular ซึ่งจะเริ่มต้นตั้งแต่คอมโพเนนต์ถูกสร้างขึ้น และจบลงเมื่อคอมโพเนนต์ถูกลบออกจาก DOM

Component Lifecycle ใน Angular มี 8 ขั้นตอน ดังนี้

1. ngOnChanges() ขั้นตอนนี้จะถูกเรียกเมื่ออินพุต (input) ของคอมโพเนนต์มีการเปลี่ยนแปลง
2. ngOnInit() ขั้นตอนนี้จะถูกเรียกเมื่อคอมโพเนนต์ถูกสร้างขึ้นและพร้อมที่จะใช้งาน
3. ngDoCheck() ขั้นตอนนี้จะถูกเรียกเมื่อ Angular ตรวจสอบการเปลี่ยนแปลงของคอมโพเนนต์
4. ngAfterContentInit() ขั้นตอนนี้จะถูกเรียกเมื่อเนื้อหา (content) ของคอมโพเนนต์ถูกโหลดเรียบร้อยแล้ว
5. ngAfterContentChecked() ขั้นตอนนี้จะถูกเรียกเมื่อ Angular ตรวจสอบการเปลี่ยนแปลงของเนื้อหา (content) ของคอมโพเนนต์
6. ngAfterViewInit() ขั้นตอนนี้จะถูกเรียกเมื่อมุมมอง (view) ของคอมโพเนนต์ถูกโหลดเรียบร้อยแล้ว
7. ngAfterViewChecked() ขั้นตอนนี้จะถูกเรียกเมื่อ Angular ตรวจสอบการเปลี่ยนแปลงของมุมมอง (view) ของคอมโพเนนต์
8. ngOnDestroy() ขั้นตอนนี้จะถูกเรียกเมื่อคอมโพเนนต์ถูกลบออกจาก DOM

เราสามารถใช้ Component Lifecycle hooks เหล่านี้เพื่อทำงานต่างๆ ในแต่ละขั้นตอน เช่น

• ngOnChanges() ใช้สำหรับอัปเดตคอมโพเนนต์เมื่ออินพุต (input) ของคอมโพเนนต์มีการเปลี่ยนแปลง
• ngOnInit() ใช้สำหรับเตรียมข้อมูลและทำงานเบื้องต้นของคอมโพเนนต์
• ngDoCheck() ใช้สำหรับอัปเดตคอมโพเนนต์เมื่อมีการเปลี่ยนแปลงใดๆ
• ngAfterContentInit() ใช้สำหรับทำงานหลังจากเนื้อหา (content) ของคอมโพเนนต์ถูกโหลดเรียบร้อยแล้ว
• ngAfterContentChecked() ใช้สำหรับตรวจสอบการเปลี่ยนแปลงของเนื้อหา (content) ของคอมโพเนนต์
• ngAfterViewInit() ใช้สำหรับทำงานหลังจากมุมมอง (view) ของคอมโพเนนต์ถูกโหลดเรียบร้อยแล้ว
• ngAfterViewChecked() ใช้สำหรับตรวจสอบการเปลี่ยนแปลงของมุมมอง (view) ของคอมโพเนนต์
• ngOnDestroy() ใช้สำหรับทำงานก่อนที่คอมโพเนนต์ถูกลบออกจาก DOM

ตัวอย่างการใช้ Component Lifecycle hooks

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

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

  constructor() {}

  ngOnInit() {
    // fetch data
  }

  ngOnDestroy() {
    // unsubscribe from any subscriptions
  }

}

ในตัวอย่างนี้ เราใช้ ngOnInit() hook เพื่อ fetch data และ ngOnDestroy() hook เพื่อ unsubscribe from any subscriptions

Component Lifecycle hooks เป็นเครื่องมือที่ทรงพลังที่ช่วยให้เราสามารถควบคุมการทำงานของคอมโพเนนต์ในแต่ละขั้นตอนได้อย่างละเอียด