Início / coding / Perguntas / 79231487
Accepted
Ya.
Asked: 2024-11-28 02:31:00 +0800 CST

Como detectar atualização de visualização no Angular?

  • 772

Tenho um componente que exibe dados dinâmicos, somente leitura. Por exemplo:

<div>{{getText()}}</div>

Notei que getText está sendo invocado repetidamente pelo Angular, mesmo que aparentemente não haja necessidade de fazer isso, ou seja, nenhum dado foi alterado. Como posso detectar quando o Angular aciona a atualização da visualização?

html

1 respostas

  1. Best Answer

    Você pode detectá-lo usando o ngDoCheckhook. Que dispara durante um ciclo de detecção de mudança.

    Em cada ciclo a função é chamada e avaliada.

    Se quiser melhorar o desempenho, você pode habilitar ChangeDetectionStrategy.OnPush, o que reduzirá o número de ciclos de detecção de alterações.

    Angular OnPush Change Detection e Design de Componentes - Evite Armadilhas Comuns

    A solução mais fácil é avaliar a função e armazená-la em uma propriedade que você mostra em HTML. Depois, você pode executar a função novamente para atualizar a propriedade sempre que ela mudar.

    exportar classe SomeComponent { @Input() conditionToUpdateText: string; displayProp = '';

    ngOnInit() {
  this.getText();
}

getText() {
  this.displayProp = this.conditionToUpdateText === 'hello' ? 'world' : 'asdf';
}

ngOnChanges() {
    this.getText();
}

    No exemplo acima, definimos o valor inicial de displayPropno ngOnInithook (durante a inicialização), então, como os dados são dependentes das entradas, usamos o ngOnChangeshook (quando as entradas mudam) para reavaliar a propriedade. O uso do HTML será:

    {{displayProp}}

    Embora seja aceitável que funções simples sejam disparadas várias vezes durante a detecção de alterações, como regra geral, evite funções, pois se você acidentalmente usar uma operação de array custosa, como findna vinculação HTML, ela será chamada várias vezes e causará uma queda no desempenho.

    • 2

relate perguntas