วิธีการค้นหาการกระทำใดของ async ที่เรียก ngZone (ซึ่งนำไปสู่การตรวจจับการเปลี่ยนแปลง)

การเปลี่ยนแปลงใด ๆ globalZoneAwareCallbackในกองติดตามการปรับปรุงอยู่เสมอนำกลับไป คุณจะรู้ได้อย่างไรว่าอะไรทำให้เกิดการเปลี่ยนแปลง

ในแง่ของการแก้จุดบกพร่องมันเป็นเรื่องดีที่จะมีภาพที่ชัดเจน

globalZoneAwareCallbackเป็นฟังก์ชั่นประกาศใน zonejs capture=falseสำหรับการจัดการการเรียกกลับเหตุการณ์ทั้งหมดที่มี (btw เพราะcapture=trueมีglobalZoneAwareCaptureCallback)

หมายความว่าผู้ฟังเหตุการณ์ใด ๆ จะผ่านวิธีนี้ก่อน ผู้ฟังนั้นสามารถเพิ่มลงในหน้าโดย Angular โดยคุณหรือจากห้องสมุดบุคคลที่สาม

มีหลายวิธีที่เราสามารถฟังเหตุการณ์เบราว์เซอร์ใน Angular ได้:

• สมัครสมาชิกกิจกรรมเบราว์เซอร์ <element (event)="callback()">

• @HostListener มัณฑนากร @HostListener('event') callback() {}

• Renderer2.listen วิธี

• rxjs fromEvent

• กำหนดคุณสมบัติองค์ประกอบ element.on<event> = callback

• วิธี addEventListener element.addEventListener(event, callback)(วิธีนี้ใช้ภายในในวิธีอื่น ๆ อีกมากมายด้านบน)

เมื่อคุณอยู่ภายในglobalZoneAwareCallbackคุณจะสามารถเข้าถึงงาน Zoneทั้งหมดที่ควรถูกเรียกใช้

ลองนึกภาพเราฟังclickเหตุการณ์เมื่อdocument.body:

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

มาเปิดเครื่องมือ Chrome dev เพื่อให้ได้ภาพที่ชัดเจน:

สิ่งที่เราเพิ่งค้นพบ:

• แต่ละงานในโซนมีแหล่งที่มาดังนั้นนี่คือสิ่งที่ทำให้เกิดการเปลี่ยนแปลง

• คุณสมบัติเป้าหมายแสดงวัตถุที่เรียกการเปลี่ยนแปลง

• คุณสมบัติการเรียกกลับสามารถนำเราไปยังตัวจัดการการเปลี่ยนแปลง

ลองพิจารณาอีกตัวอย่างหนึ่งและเพิ่มเหตุการณ์การคลิกโดยใช้วิธีเชิงมุม:

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

เมื่อเราคลิกที่h2องค์ประกอบนั้นเราควรสังเกตสิ่งต่อไปนี้:

คุณอาจจะแปลกใจว่าตอนนี้เรียกกลับสถานที่ให้บริการไม่ได้นำเราไปสู่testการเรียกกลับทันที @angular/platform-browser packageแต่เราแสดงให้เห็นจากการห่อหุ้ม และกรณีอื่น ๆ ก็อาจแตกต่างกัน แต่ZoneTask.sourceคุณสมบัติมักจะเป็นสิ่งที่คุณต้องการในกรณีดังกล่าวเพราะมันแสดงให้เห็นว่าคุณสาเหตุของการเปลี่ยนแปลง