Các lifecycle hook của component trong Angular là gì?

Question

Accepted Answer

**Lifecycle hook** là các phương thức mà Angular gọi tại những thời điểm cụ thể trong vòng đời của một component — tạo, thay đổi input, render, và hủy. Bạn triển khai chúng bằng cách thêm các phương thức của interface vào class component.

## Các hook chính theo thứ tự

```ts
import { Component, OnInit, OnDestroy, OnChanges, SimpleChanges } from "@angular/core";

@Component({ ... })
export class MyComponent implements OnInit, OnDestroy, OnChanges {
  ngOnChanges(changes: SimpleChanges) {
    // được gọi khi một giá trị @Input thay đổi (trước ngOnInit ở lần đầu tiên)
  }
  ngOnInit() {
    // được gọi MỘT LẦN sau ngOnChanges đầu tiên — khởi tạo, lấy dữ liệu
  }
  ngOnDestroy() {
    // được gọi ngay trước khi component bị gỡ bỏ — DỌN DẸP ở đây
  }
}
```

## Trình tự đầy đủ

```text
constructor          → DI xảy ra; input CHƯA có sẵn
ngOnChanges          → khi các giá trị @Input được đặt/thay đổi
ngOnInit             → một lần, sau ngOnChanges đầu tiên ★ (khởi tạo, lấy dữ liệu)
ngDoCheck            → mỗi lần chạy change detection (change detection tùy chỉnh)
ngAfterContentInit   → nội dung được chiếu (<ng-content>) đã khởi tạo
ngAfterViewInit      → view của component + các view con đã sẵn sàng ★ (truy cập @ViewChild)
ngAfterViewChecked   → sau mỗi lần kiểm tra view
ngOnDestroy          → trước khi gỡ bỏ ★ (unsubscribe, xóa timer)
```

## Ba hook bạn dùng nhiều nhất

```ts
ngOnInit() {
  this.userService.getUsers().subscribe(u => this.users = u); // khởi tạo/lấy dữ liệu — input đã sẵn sàng
}
ngAfterViewInit() {
  this.chart.nativeElement.focus(); // DOM/@ViewChild đã tồn tại lúc này
}
ngOnDestroy() {
  this.subscription.unsubscribe();   // ngăn ngừa memory leak!
  clearInterval(this.timer);
}
```

- **`ngOnInit`** — nơi tiêu chuẩn để khởi tạo và lấy dữ liệu (khác với constructor, các `@Input` đã có sẵn ở đây).
- **`ngAfterViewInit`** — khi các view con và tham chiếu `@ViewChild` đã tồn tại.
- **`ngOnDestroy`** — dọn dẹp: unsubscribe khỏi Observable, xóa timer, gỡ listener.

## Vì sao dùng ngOnInit thay vì constructor

Constructor chỉ nên làm DI; input chưa được bind ở đó. `ngOnInit` chạy sau khi Angular đã thiết lập component và các input của nó — đúng chỗ cho logic khởi động.

## Tại sao điều này quan trọng

Lifecycle hook cho phép bạn chạy logic đúng thời điểm — khởi tạo trong `ngOnInit`, truy cập view đã render trong `ngAfterViewInit`, và quan trọng nhất là **dọn dẹp trong `ngOnDestroy`** (unsubscribe khỏi Observable là cách số 1 để tránh memory leak trong Angular).

Biết thứ tự và vai trò của từng hook là thiết yếu để lấy dữ liệu đúng cách, truy cập DOM, và quản lý tài nguyên.