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

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.

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:

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:

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 .