Na maioria dos casos, você vai querer usar {static: false}
. A configuração dessa maneira garantirá que sejam encontradas correspondências de consulta dependentes da resolução de ligação (como diretivas estruturais *ngIf, etc...
).
Exemplo de quando usar static: false
:
@Component({
template: `
<div *ngIf="showMe" #viewMe>Am I here?</div>
<button (click)="showMe = !showMe"></button>
`
})
export class ExampleComponent {
@ViewChild('viewMe', { static: false })
viewMe?: ElementRef<HTMLElement>;
showMe = false;
}
O static: false
que vai ser o comportamento fallback padrão no Angular 9. Leia mais aqui e aqui
o { static: true }
opção foi introduzida para oferecer suporte à criação de visualizações incorporadas em tempo real. Quando você cria uma visualização dinamicamente e deseja acessar TemplateRef
, não poderá fazer isso, ngAfterViewInit
pois isso causará um ExpressionHasChangedAfterChecked
erro. Definir o sinalizador estático como true criará sua visualização no ngOnInit.
Mesmo assim:
Na maioria dos outros casos, a melhor prática é usar {static: false}
.
Esteja ciente de que o { static: false }
opção será padronizada no Angular 9. O que significa que a configuração do sinalizador estático não é mais necessária, a menos que você queira usar a static: true
opção.
Você pode usar o ng update
comando angular cli para atualizar automaticamente sua base de código atual.
Para um guia de migração e ainda mais informações sobre isso, você pode conferir aqui e aqui
Qual é a diferença entre consultas estáticas e dinâmicas?
A opção estática para as consultas @ViewChild () e @ContentChild () determina quando os resultados da consulta ficam disponíveis.
Com consultas estáticas (static: true), a consulta é resolvida assim que a exibição é criada, mas antes da execução da detecção de alterações. O resultado, no entanto, nunca será atualizado para refletir alterações na sua exibição, como alterações nos blocos ngIf e ngFor.
Com consultas dinâmicas (static: false), a consulta é resolvida após ngAfterViewInit () ou ngAfterContentInit () para @ViewChild () e @ContentChild (), respectivamente. O resultado será atualizado para alterações em sua visualização, como alterações nos blocos ngIf e ngFor.