Angular Signals là gì?

Question

Accepted Answer

**Signal** là nguyên thủy reactive của Angular (thêm vào từ Angular 16+) để quản lý state — một lớp bọc quanh một giá trị **thông báo cho các consumer khi nó thay đổi**, cho phép các cập nhật mịn (fine-grained), hiệu quả mà không phụ thuộc vào change detection của Zone.js. ## Tạo và sử dụng một signal ```ts import { signal, computed, effect } from "@angular/core"; export class CounterComponent { count = signal(0); // một signal có thể ghi double = computed(() => this.count() * 2); // signal dẫn xuất (tự cập nhật) increment() { this.count.set(this.count() + 1); // đặt một giá trị mới this.count.update(c => c + 1); // hoặc cập nhật dựa trên giá trị hiện tại } constructor() { effect(() => { console.log(`count is now ${this.count()}`); // chạy lại khi count thay đổi }); } } ``` ## Đọc một signal: gọi nó như một hàm ```html ``` Lưu ý signal được **đọc bằng cách gọi chúng** (`count()`), không phải như thuộc tính thường. Trong template, Angular theo dõi chính xác view đọc những signal nào, nên chỉ các phần bị ảnh hưởng được cập nhật khi một signal thay đổi. ## Ba loại signal ```text signal(value) → state có thể ghi, cập nhật qua .set() / .update() computed(() => ...) → giá trị dẫn xuất/được cache; tự tính lại khi các dep thay đổi effect(() => ...) → chạy một side effect mỗi khi các signal được đọc thay đổi ``` `computed` là lazy và được cache (giống computed của Vue); `effect` chạy side effect theo lối reactive (giống một watcher). ## Vì sao signal quan trọng: reactivity mịn ```text Angular truyền thống: một thay đổi kích hoạt kiểm tra TOÀN BỘ cây component (Zone.js) Signal: Angular biết CHÍNH XÁC view nào phụ thuộc vào một signal đã thay đổi → chỉ cập nhật những view đó → hiệu quả hơn nhiều, và cho phép Angular "zoneless" ``` Signal cho Angular **theo dõi phụ thuộc chính xác** — khi một signal thay đổi, chỉ các view và computed thực sự đọc nó được cập nhật. Điều này hiệu quả hơn change detection rộng mà Zone.js kích hoạt, và là nền tảng để loại bỏ Zone.js hoàn toàn (chế độ zoneless). ## Signal-based input (mới hơn) ```ts name = input(); // @Input dưới dạng signal name = input.required(); ``` ## Tại sao điều này quan trọng Signal là bước tiến hóa gần đây đáng kể nhất trong reactivity của Angular — một mô hình đơn giản hơn, tường minh hơn, và hiệu quả hơn nhiều so với change detection ngầm của Zone.js. Chúng cho phép cập nhật mịn, giảm kiểm tra không cần thiết, tích hợp gọn gàng với computed/effect, và mở đường cho Angular zoneless. Hiểu signal ngày càng thiết yếu, khi Angular đang lái việc phát triển mới hướng tới chúng như nguyên thủy state mặc định.