Angular च्या कम्पोनेंट लाइफसायकल हूक्स काय आहेत?

Question

IT Interview Practice · Accepted Answer

**लाइफसायकल हूक्स** ही मेथड्स आहेत जी Angular कम्पोनेंटच्या जीवनात विशिष्ट क्षणी — निर्माण, इनपुट बदल, रेंडरिंग आणि नाश — वर कॉल करते. तुम्ही त्यांना तुमच्या कम्पोनेंट क्लासमध्ये इंटरफेस मेथड्स जोडून लागू करता.

## मुख्य हूक्स क्रमानुसार

```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`** — प्रारंभीकरण आणि डेटा फेचिंगचे मानक स्थान (कन्स्ट्रक्टरच्या विपरीत, `@Input` येथे उपलब्ध आहेत).
- **`ngAfterViewInit`** — जेव्हा चाइल्ड व्यूज आणि `@ViewChild` संदर्भ अस्तित्वात असतात.
- **`ngOnDestroy`** — क्लीनअप: Observable वरून अनसबस्क्राइब करा, टाइमर साफ करा, श्रोता काढून टाका.

## कन्स्ट्रक्टरऐवजी ngOnInit का

कन्स्ट्रक्टर केवळ DI करावा; इनपुट अजून तेथे बांधलेले नाहीत. `ngOnInit` Angular ने कम्पोनेंट आणि त्याचे इनपुट सेट केल्यानंतर चालते — स्टार्टअप लॉजिकसाठी योग्य स्थान.

## हे का महत्वाचे आहे

लाइफसायकल हूक्स तुम्हाला योग्य वेळी लॉजिक चालू करू देतात — `ngOnInit` मध्ये प्रारंभीकरण करा, `ngAfterViewInit` मध्ये रेंडर केलेले व्यू अ्याक्सेस करा, आणि महत्वाचे म्हणजे **`ngOnDestroy` मध्ये क्लीनअप करा** (Observable वरून अनसबस्क्राइब करणे Angular मध्ये मेमरी लीक्स टाळण्याचा #1 मार्ग आहे).

प्रत्येक हूकचा क्रम आणि भूमिका जाणून घेणे योग्य डेटा फेचिंग, DOM ऍक्सेस आणि संसाधन व्यवस्थापनासाठी आवश्यक आहे.

मुख्य हूक्स क्रमानुसार

संपूर्ण अनुक्रम

तीन जे तुम्ही सर्वाधिक वापरता

कन्स्ट्रक्टरऐवजी ngOnInit का

हे का महत्वाचे आहे

संबंधित प्रश्न