O que é detecção de alterações? O artigo a seguir falará sobre o mecanismo de detecção de alterações no Angular, apresentará como as alterações de status notificam a detecção de alterações e a estratégia de detecção de alterações do Angular. Espero que seja útil para todos.
Resumo: Um检测机制de alterações que percorre a árvore de componentes, verifica alterações em cada componente e aciona atualizações DOM quando as propriedades do componente são alteradas. [Tutoriais relacionados recomendados: "tutorial angular"]
A tarefa básica de detecção de alterações: Obter o状态interno do programa e torná可见na interface do usuário. Este estado pode ser qualquer objeto, matriz ou tipo de dados básico.
As fontes orientadas a eventos se enquadram nas três categorias a seguir:
Eventos: clique na página, enviar, passar o mouse...
XHR: obtenha dados do servidor back-end
Temporizadores: setTimeout(), setInterval()
Esses pontos têm uma coisa em comum, ou seja, são todos assíncronos, ou seja, todas异步操作são os fatores raiz que podem causar alterações nos dados, portanto sempre que algumas operações assíncronas forem realizadas, o estado da nossa aplicação poderá mudar. Neste momento, você precisa atualizar a visualização
No Angular NgZone está conectado, que monitora todos异步事件do Angular e reescreverá (por meio de Zone.js ) algumas das APIs do navegador subjacentes na inicialização (interceptando violentamente todos os eventos assíncronos).
Existem duas maneiras comuns de acionar a detecção de alterações. Um método é baseado em ganchos do ciclo de vida do componente.
ngAfterViewChecked() {
console.log('cluster-master.component cd');
}Outro método é ativar ou desativar manualmente a detecção de alterações e acioná-la manualmente
construtor(cd privado: ChangeDetectorRef) {
cd.detach()
setInterval(() => {
this.cd.detectChanges()
}, 5.000)
} O núcleo do Angular é a componenteização. O aninhamento de componentes eventualmente formará uma组件树. A detecção de alterações do Angular pode ser dividida em componentes. Cada componente possui um变化检测器ChangeDetector correspondente.
No Angular cada componente possui seu próprio detector de alterações, o que nos permite controlar como e quando a detecção de alterações é realizada para cada componente.
Angular também oferece aos desenvolvedores a capacidade de personalizar estratégias de detecção de alterações.
padrão:每次detecção de alteração causará a detecção de alterações do componente, incluindo alterações de estado de其他组件e alterações nos valores de atributos internos das variáveis de referência本组件
Onpush: Cada detecção de alteração irá ignorar a verificação de alteração deste componente, a menos que满足一些条件.
4.1 padrão
O mecanismo de detecção de alterações padrão do Angular é ChangeDetectionStrategy.Default . Após o término de cada retorno de chamada de evento assíncrono, o NgZone acionará整个组件树para realizar a detecção de alterações至上而下
4.2 onPush
Estratégia OnPush, usada para跳过a detecção de alterações de um componente e所有子组件abaixo dele
Na verdade, depois de definir a política OnPush , ainda existem muitas maneiras de acionar a detecção de alterações;
1)引用do atributo @Input do componente muda.
2) Eventos DOM dentro do componente, incluindo eventos DOM de seus subcomponentes, como click、submit、mouse down .
3) Observable no componente assina o evento e define Async pipe ao mesmo tempo.
4) Use manualmente ChangeDetectorRef.detectChanges()、ChangeDetectorRef.markForCheck()、ApplicationRef.tick() no componente
markForCheck(): usado para子组件该子组件到根组件, notificando o detector angular一定verificar os componentes neste caminho durante a próxima detecção de alterações, mesmo se a estratégia de detecção de alterações estiver definida como onPush
detectChanges(): inicia manualmente a detecção de alterações该组件到各个子组件
detach():脱离o detector do componente do número de detectores e não será mais controlado pelo mecanismo de detecção, a menos que seja reconectado.
reanexar():重新链接o detector desconectado à árvore de detectores