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있으면 트리거해야 할 모든 영역 작업에 액세스 할 수 있습니다.

다음에서 click이벤트를 듣는다고 상상해 봅시다 document.body.

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

Chrome 개발자 도구를 열어 명확한 그림을 만들어 보겠습니다.

우리가 방금 발견 한 것 :

• 각 Zone 작업에는 소스가 포함되어 있으므로 변경을 유발합니다.

• 대상 속성은 어떤 개체가 변경을 트리거하는지 나타냅니다.

• 콜백 속성은 우리를 변경 처리기로 이끌 수 있습니다.

다른 예를 고려하고 Angular 방식을 사용하여 클릭 이벤트를 추가합시다.

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

해당 h2요소를 클릭 하면 다음을 관찰해야합니다.

이제 콜백 속성으로 인해 test콜백이 발생 하지 않았지만 에서 래퍼를 표시 한 것에 놀랐을 것입니다 @angular/platform-browser package. 그리고 다른 경우도 다를 수 있지만 ZoneTask.source의 그것 때문에 당신이 그 경우에 필요한 모든 속성은 일반적으로 보여줍니다 당신에게 변화의 근본 원인을 .