Bagaimana Cara Mengubah Pendeteksian Dalam Angular

Deteksi perubahan mendeteksi perubahan di setiap elemen aplikasi Anda dan merender ulang penampilan, sehingga menampilkan nilai yang diperbarui ke pengguna akhir.

Peristiwa berbeda di mana perubahan terjadi:

Data diterima dari permintaan jaringan atau peristiwa elemen.
Click mouse, scrolling, mouseover, navigasi keyboard
AJAX Calls
Penggunaan fungsi pengatur waktu seperti setTimeout() atau setInterval().

Bagaimana cara kerja Change Detection

Setiap sesuatu memicu perubahan.
Untuk mendeteksi dan mengupdate DOM dengan data yang diubah, frame-work menyediakan detektor deteksi perubahannya sendiri untuk tiap elemen.
Detektor perubahan memastikan model data dan DOM sinkron.
Ketika deteksi perubahan Angular mendeteksi perubahan yang dipicu dan menjalankan deteksi perubahan ke semua pohon elemen dari atas ke bawah.

Strategi Deteksi Perubahan Sudut

Ada dua strategi pada intinya dalam sudut:-

Strategi Deteksi Perubahan Standar
Strategi Deteksi Perubahan OnPush

Strategi Deteksi Perubahan Standar

Jika Angular Change Detector diatur ke standar karena itu untuk setiap perubahan dalam property model apa pun itu, Angular akan menjalankan deteksi perubahan melintasi pohon elemen untuk mengupdate DOM.

Kelas Change Detector Ref menyediakan beberapa metode bawaan, yang bisa kita gunakan untuk memanipulasi detection tree perubahan.

markForCheck() — mengidentifikasi jika itu berubah.
detach() — mengecualikan tampilan dari detection tree perubahan
detect Changes() — check tampilan dan elemen turunannya
checkNoChanges() -periksa tampilan dan itu child, melempar kesalahan bila perubahan teridentifikasi.
reattach() — pasang kembali tampilan yang sebelumnya lepas

Strategi Deteksi Perubahan Angular OnPush

Bila detektor perubahan sudut diatur ke onPush maka Angular akan menjalankan detektor perubahan hanya ketika referensi baru diteruskan ke elemen.

Bila observable diteruskan ke onPush, karena itu changeDetector harus dipanggil secara manual untuk mengupdate DOM

Manfaat

Pemeriksaan child yang tidak perlu tidak dilakukan bila elemen induk mengupdate nilai yang tidak diteruskan @Input

Di sini kami telah mengubah strategi menjadi OnPush