Apakah hooklet kitaran hidup komponen Angular?

Question

Accepted Answer

**Hooklet kitaran hidup** adalah kaedah yang dipanggil Angular pada saat-saat tertentu dalam kehidupan komponen — penciptaan, perubahan input, rendering, dan pemusnahan. Anda melaksanakannya dengan menambah kaedah antara muka ke kelas komponen anda.

## Hooklet utama mengikut urutan

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

## Urutan lengkap

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

## Tiga yang paling anda gunakan

```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`** — tempat standard untuk permulaan dan pengambilan data (tidak seperti pembina, `@Input` tersedia di sini).
- **`ngAfterViewInit`** — apabila pandangan anak dan rujukan `@ViewChild` wujud.
- **`ngOnDestroy`** — pembersihan: nyahlanggani daripada Observable, kosongkan pemasa, alih keluar pendengar.

## Mengapa ngOnInit dan bukannya pembina

Pembina seharusnya hanya melakukan DI; input belum terikat di sana. `ngOnInit` berjalan selepas Angular telah menyediakan komponen dan inputnya — tempat yang betul untuk logik permulaan.

## Mengapa ia penting

Hooklet kitaran hidup membenarkan anda menjalankan logik pada masa yang tepat — inisialisasi dalam `ngOnInit`, akses pandangan yang dirender dalam `ngAfterViewInit`, dan yang penting **bersih dalam `ngOnDestroy`** (nyahlanggani daripada Observable adalah cara #1 untuk mengelakkan kebocoran memori dalam Angular).

Mengetahui urutan dan peranan setiap hooklet adalah penting untuk pengambilan data yang betul, akses DOM, dan pengurusan sumber daya.