Làm cách nào để tìm hành động không đồng bộ nào kích hoạt ngZone (dẫn đến Phát hiện thay đổi)?

Bất kỳ thay đổi nào trong dấu vết ngăn xếp của các bản cập nhật luôn dẫn trở lại globalZoneAwareCallback. Làm thế nào để bạn tìm ra những gì gây ra sự thay đổi?

Về mặt gỡ lỗi, thật tốt khi có một bức tranh rõ ràng.

globalZoneAwareCallbacklà một hàm được khai báo trong vùngj để xử lý tất cả các cuộc gọi lại sự kiện với capture=false. (btw, vì capture=truecó globalZoneAwareCaptureCallback)

Nó có nghĩa là bất kỳ người nghe sự kiện đầu tiên sẽ đi qua phương pháp này. Người nghe đó có thể được thêm vào trên trang bởi Angular, bởi bạn hoặc bởi bất kỳ thư viện bên thứ 3 nào.

Có nhiều cách để chúng ta có thể nghe các sự kiện trình duyệt trong Angular:

• đăng ký sự kiện trình duyệt <element (event)="callback()">

• @HostListener người trang trí @HostListener('event') callback() {}

• Renderer2.listen phương pháp

• rxjs fromEvent

• gán thuộc tính phần tử element.on<event> = callback

• phương thức addEventListener element.addEventListener(event, callback)(phương thức này được sử dụng nội bộ theo nhiều cách khác ở trên)

Khi bạn ở trong globalZoneAwareCallbackbạn có quyền truy cập vào tất cả các tác vụ Vùng cần được kích hoạt.

Hãy tưởng tượng chúng ta nghe clicksự kiện trên document.body:

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

Hãy mở các công cụ phát triển Chrome để có một bức tranh rõ ràng:

Những gì chúng ta vừa khám phá:

• mỗi tác vụ Vùng chứa nguồn, vì vậy đây là yếu tố kích hoạt thay đổi

• thuộc tính mục tiêu cho thấy đối tượng nào kích hoạt thay đổi

• tài sản gọi lại có thể dẫn chúng ta đến xử lý thay đổi

Hãy xem xét một ví dụ khác và thêm sự kiện nhấp bằng cách sử dụng cách Angular:

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

Khi chúng ta nhấp vào h2yếu tố đó, chúng ta sẽ tuân thủ các điều sau:

Bạn có thể ngạc nhiên rằng bây giờ tài sản gọi lại đã không đưa chúng ta đến cuộc testgọi lại ngay mà thay vào đó chúng tôi đã hiển thị một số trình bao bọc từ đó @angular/platform-browser package. Và các trường hợp khác cũng có thể khác nhau nhưng thuộc tính của ZoneTask.source thường là tất cả những gì bạn cần trong các trường hợp đó vì nó cho bạn thấy nguyên nhân gốc của sự thay đổi .