Giới thiệu về Change Detection trong Angular

Change Detection là một trong những cơ chế quan trọng nhất trong Angular, giúp ứng dụng của bạn luôn đồng bộ với trạng thái dữ liệu. Hãy cùng tìm hiểu sâu về cơ chế này và cách tận dụng nó để xây dựng ứng dụng Angular hiệu quả.

Table of contents

Change Detection là gì?

Change Detection trong Angular là quá trình phát hiện các thay đổi trong dữ liệu của ứng dụng và cập nhật UI tương ứng. Cơ chế này đảm bảo rằng giao diện người dùng luôn phản ánh chính xác trạng thái hiện tại của ứng dụng.

Cách hoạt động của Change Detection

1. Cập nhật model: Thay đổi dữ liệu trong ứng dụng.
2. Kích hoạt Change Detection: Angular nhận biết sự thay đổi và bắt đầu quá trình Change Detection.
3. Kiểm tra component tree: Angular duyệt qua cây component từ trên xuống dưới.
4. So sánh và cập nhật: Với mỗi component, Angular so sánh giá trị mới và cũ, cập nhật nếu cần.
5. Render view: Angular cập nhật DOM để phản ánh các thay đổi.

Zone.js: Công cụ đằng sau hậu trường

Zone.js là một thư viện giúp Angular theo dõi và quản lý các tác vụ bất đồng bộ. Nó bao bọc các API bất đồng bộ của trình duyệt, cho phép Angular biết khi nào cần chạy Change Detection.

1
import 'zone.js'; // Thường được import trong polyfills.ts

Bạn có thể xem cách Zone.js bao bọc API timer: Zone.js timer

Khi nào Change Detection được kích hoạt?

CD được kích hoạt trong nhiều trường hợp, bao gồm:

1. DOM event (click, submit, …)
2. HTTP requests
3. Timers (setTimeout, setInterval)
4. Promises
5. Observables

NgZone: Kiểm soát Change Detection

NgZone là một service Angular cho phép bạn kiểm soát khi nào Change Detection nên được kích hoạt:

1
constructor(private ngZone: NgZone) {}
2

3
performHeavyComputation() {
4
  this.ngZone.runOutsideAngular(() => {
5
    // Code ở đây sẽ không kích hoạt change detection
6
  });
7
}

Async Pipe: Tự động quản lý Change Detection

Async pipe không chỉ giúp xử lý Observables và Promises trong template, mà còn tự động kích hoạt Change Detection khi có dữ liệu mới:

1
<div>{{ data$ | async }}</div>

Kết luận

Change Detection là nền tảng của Angular’s reactivity. Hiểu rõ cách nó hoạt động sẽ giúp bạn xây dựng ứng dụng Angular hiệu quả hơn. Trong bài tiếp theo, chúng ta sẽ đi sâu vào Change Detection Strategy và cách tối ưu hóa hiệu suất ứng dụng.

Bài viết và video tham khảo