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
Artikel Terkait Lainnya :
- Inilah Penjelasan Lengkap Generator Dalam JavaScript
- Apa Yang Baru Di Fitur Dan Pembaruan Angular 15
- Tutorial Membangun Aplikasi Chat Real-Time Dengan Angular Dan Firebase
- Ini Dia Langkah Penting Menyusun Aplikasi Angular
- Bagaimana Cara Memilih Framework JavaScript Terbaik: React, Angular, atau Vue?