Bagaimana menemukan tindakan async mana yang memicu ngZone (yang mengarah ke Change Detection)?


11

Setiap perubahan dalam jejak tumpukan pembaruan selalu mengarah kembali ke globalZoneAwareCallback. Bagaimana Anda mengetahui apa yang memicu perubahan?

Dalam hal debugging, ada baiknya memiliki gambaran yang jelas.


Mau jelaskan?
user2167582

Pertanyaan Anda benar-benar ambigu!
nimeresam

@nimeresam Bagaimana bisa begitu? secara umum saya setuju, tapi ambigu?
user2167582

2
Saya telah memperbarui pertanyaan, semoga membantu Anda
Stepan Suvorov

Jawaban:


31

globalZoneAwareCallbackadalah fungsi yang dideklarasikan di zonejs untuk menangani semua panggilan balik acara dengan capture=false. (btw, karena capture=trueada globalZoneAwareCaptureCallback)

Ini berarti bahwa setiap pendengar acara akan terlebih dahulu melalui metode ini. Pendengar itu dapat ditambahkan pada halaman oleh Angular, oleh Anda atau oleh perpustakaan pihak ke-3.

Ada banyak cara bagaimana kita dapat mendengarkan acara browser di Angular:

  • berlangganan acara browser <element (event)="callback()">

  • @HostListener penghias @HostListener('event') callback() {}

  • Renderer2.listen metode

  • rxjs fromEvent

  • menetapkan properti elemen element.on<event> = callback

  • metode addEventListener element.addEventListener(event, callback)(metode ini digunakan secara internal dalam banyak cara lain di atas)

Setelah Anda berada di dalam, globalZoneAwareCallbackAnda memiliki akses ke semua tugas Zona yang harus dipicu.

Mari kita bayangkan kita mendengarkan clickacara di document.body:

document.body.addEventListener('click', () => {
   // some code
});

Mari kita buka alat dev Chrome untuk memiliki gambar yang jelas:

masukkan deskripsi gambar di sini

Apa yang baru saja kami temukan:

  • setiap tugas Zone berisi sumber jadi ini yang memicu perubahan

  • properti target menunjukkan objek mana yang memicu perubahan

  • properti callback dapat membawa kita ke penangan perubahan

Mari kita pertimbangkan contoh lain dan tambahkan event klik menggunakan cara Angular:

<h2 class="title" (click)="test()">Hello {{name}}</h2>

Setelah kita klik pada h2elemen itu kita harus memperhatikan hal berikut:

masukkan deskripsi gambar di sini

Anda mungkin terkejut bahwa sekarang properti panggilan balik tidak langsung membawa kami ke testpanggilan balik, tetapi kami menunjukkan beberapa bungkusnya @angular/platform-browser package. Dan kasus lain juga mungkin berbeda tetapi properti ZoneTask.source biasanya yang Anda butuhkan dalam kasus tersebut karena itu menunjukkan kepada Anda akar penyebab perubahan .


Terima kasih, Pak, itu jawaban yang bagus. Saya berharap bisa menggandakan hadiah.
user2167582
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.