Como descobrir qual ação assíncrona aciona o ngZone (que leva à detecção de alterações)?

Quaisquer alterações no rastreamento de pilha das atualizações sempre retornam a globalZoneAwareCallback. Como você descobre o que desencadeou a mudança?

Em termos de depuração, é bom ter uma imagem clara.

globalZoneAwareCallbacké uma função declarada em zonejs para manipular todos os retornos de chamada de evento capture=false. (aliás, porque capture=trueexiste globalZoneAwareCaptureCallback)

Isso significa que qualquer ouvinte de evento passará primeiro por esse método. Esse ouvinte pode ser adicionado na página pelo Angular, por você ou por qualquer biblioteca de terceiros.

Existem várias maneiras de ouvir os eventos do navegador no Angular:

• assine o evento do navegador <element (event)="callback()">

• @HostListener decorador @HostListener('event') callback() {}

• Renderer2.listen método

• rxjs fromEvent

• atribuir propriedade do elemento element.on<event> = callback

• Método addEventListener element.addEventListener(event, callback)(esse método é usado internamente de várias outras maneiras acima)

Uma vez dentro, globalZoneAwareCallbackvocê tem acesso a todas as tarefas da Zona que devem ser acionadas.

Vamos imaginar que ouvimos clickeventos sobre document.body:

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

Vamos abrir as ferramentas de desenvolvimento do Chrome para ter uma imagem clara:

O que acabamos de descobrir:

• cada tarefa da Zona contém origem, e é isso que desencadeia a mudança

• A propriedade target mostra qual objeto aciona a alteração

• propriedade de retorno de chamada pode nos levar ao manipulador da alteração

Vamos considerar outro exemplo e adicionar evento de clique usando a maneira Angular:

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

Depois de clicar nesse h2elemento, devemos observar o seguinte:

Você pode se surpreender ao saber que agora a propriedade de retorno de chamada não nos levou ao testretorno imediatamente, mas exibimos algum invólucro @angular/platform-browser package. E outros casos também podem ser diferentes, mas ZoneTask.source propriedade é geralmente tudo que você precisa, nesses casos, porque mostra que você a causa raiz da mudança .