업데이트 스택 추적의 변경 사항은 항상으로 돌아갑니다 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의 그것 때문에 당신이 그 경우에 필요한 모든 속성은 일반적으로 보여줍니다 당신에게 변화의 근본 원인을 .
