Kokie yra Angular komponento gyvenimo ciklo trūkiai?

Question

IT Interview Practice · Accepted Answer

**Gyvenimo ciklo trūkiai** yra metodai, kuriuos Angular iškviečia tam tikrais komponento gyvenimo momentais — sukūrimu, įvesties pasikeitimais, vaizdavimo metu ir sunaikinimu. Jūs juos įgyvendinate įdėdami sąsajos metodus į savo komponento klasę.

## Pagrindiniai trūkiai eilės tvarka

```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
  }
}
```

## Pilna seka

```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)
```

## Trys, kuriuos naudojate dažniausiai

```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`** — standartinė vieta inicijalizavimui ir duomenų gauti (skirtingai nei konstruktoriaus, čia yra prieigą `@Input`).
- **`ngAfterViewInit`** — kai egzistuoja antrinės peržiūros ir `@ViewChild` nuorodos.
- **`ngOnDestroy`** — valymas: atsiregistruokite nuo Observable, ištvalykite laikmačius, pašalinkite klausytuvus.

## Kodėl ngOnInit vietoj konstruktoriaus

Konstruktorius turėtų tik atlikti DI; įvestis dar nėra susieta. `ngOnInit` veikia po to, kai Angular nustatė komponentą ir jo įvestį — tinkama vieta paleidimo logikai.

## Kodėl tai svarbu

Gyvenimo ciklo trūkiai leidžia jums paleisti logiką tinkamuoju metu — inicijalizuoti `ngOnInit`, pasiekti atvaizduotą peržiūrą `ngAfterViewInit` ir iš esmės **valyti `ngOnDestroy`** (atsiregistravimas nuo Observable yra #1 būdas išvengti atminties nuotėkio Angular).

Žinant kiekvieno trūkio tvarką ir vaidmenį yra būtina teisingam duomenų gavimui, DOM prieinamumui ir išteklių valdymui.

Pagrindiniai trūkiai eilės tvarka

Pilna seka

Trys, kuriuos naudojate dažniausiai

Kodėl ngOnInit vietoj konstruktoriaus

Kodėl tai svarbu

Susiję klausimai