ngOnInit, ngOnDestroy और ngOnChanges

हुक्स क्यों ज़रूरी हैं

Angular विशेष क्षणों पर विशेष मेथड कॉल करता है — निर्माण, अपडेट, विनाश — अगर आपकी क्लास उन्हें implement करती है। इसी तरह सही समय पर सेटअप और क्लीनअप कोड चलता है।

ngOnInit और ngOnDestroy

ngOnInit कंपोनेंट के inputs पहली बार सेट होने के बाद एक बार चलता है — यही शुरुआती डेटा लाने की सामान्य जगह है। ngOnDestroy कंपोनेंट हटाए जाने से ठीक पहले चलता है — यहाँ subscriptions और timers साफ़ करें।

export class TimerComponent implements OnInit, OnDestroy {
  private intervalId?: ReturnType<typeof setInterval>;

  ngOnInit() {
    this.intervalId = setInterval(() => this.tick(), 1000);
  }

  ngOnDestroy() {
    clearInterval(this.intervalId);
  }

  tick() { /* ... */ }
}

ngOnChanges

जब भी किसी bound @Input() का मान बदलता है, ngOnChanges चलता है, और इसे पिछला व वर्तमान दोनों मान मिलते हैं।

ngOnChanges(changes: SimpleChanges) {
  if (changes['rating']) {
    console.log(changes['rating'].previousValue, changes['rating'].currentValue);
  }
}

त्वरित जाँच: किसी timer को साफ़ करना या किसी stream से unsubscribe करना कहाँ करना चाहिए?

• ngOnInit
• ngOnChanges
• ngAfterViewInit
• ngOnDestroy