Angular-இன் கூறு வாழ்க்கைச் சுழற்சி கொக்கிகள் என்ன?

Question

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`** — தூய்மை: Observables இலிருந்து குறிப்பிடத் தவிர்க்கவும், பல்நேர வாசகர்களை நீக்கவும், கேட்பவர்களை அகற்றவும்.

## கட்டுமாணத்திற்குப் பதிலாக ngOnInit ஏன்

கட்டுமாணம் DI மட்டுமே செய்ய வேண்டும்; உள்ளீடுகள் இன்னும் பிணைக்கப்படவில்லை. `ngOnInit` Angular கூறை மற்றும் அதன் உள்ளீடுகளைக் கட்டமைத்த பிறகு இயங்குகிறது — தொடக்க தர্க்கத்திற்கான சரியான இடம்.

## இது ஏன் முக்கியமானது

வாழ்க்கைச் சுழற்சி கொக்கிகள் சரியான நேரத்தில் தர்க்கத்தை இயக்க அனுமதிக்கின்றன — `ngOnInit`-ல் துவக்குவதும், `ngAfterViewInit`-ல் வழங்கப்பட்ட பார்வையை அணுகுவதும், மற்றும் முக்கியமாக `ngOnDestroy`-ல் **தூய்மை** செய்வதும் (Observables இலிருந்து குறிப்பிடுவது Angular-ல் நினைவக கசிவுகளைத் தவிர்ப்பதற்கான #1 வழியாகும்).

ஒவ்வொரு கொக்கியின் வரிசை மற்றும் பாத்திரத்தை அறிந்துகொள்வது சரியான தரவு பெறுதல், DOM அணுகல் மற்றும் வளம் நிர்வாகத்திற்கு இன்றியமையாதது.