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.
{ static: true }
, mas se não houver necessidade direta de ter acesso ao ViewChild dentrongOnInit
, basta usar o{ static: false }
.Portanto, como regra geral, você pode fazer o seguinte:
{ static: true }
precisa ser definido quando você quiser acessar oViewChild
nongOnInit
.{ static: false }
só pode ser acessado emngAfterViewInit
. Também é isso que você deseja buscar quando tiver uma diretiva estrutural (ou seja*ngIf
) em seu elemento no seu modelo.fonte
Dos documentos angulares
Pode ser uma idéia melhor usar
static:true
se a criança não depender de nenhuma condição. Se a visibilidade do elemento mudar,static:false
poderá gerar melhores resultados.PS: Como é um novo recurso, podemos precisar executar benchmarks para obter desempenho.
Editar
Conforme mencionado por @Massimiliano Sartoretto, o github commit pode fornecer mais informações.
fonte
Veio aqui porque um ViewChild era nulo no ngOnInit após a atualização para o Angular 8.
As consultas estáticas são preenchidas antes do ngOnInit, enquanto as consultas dinâmicas (static: false) são preenchidas depois. Em outras palavras, se um viewchild agora for nulo no ngOnInit depois de definir static: false, considere alterar para static: true ou mova o código para ngAfterViewInit.
Consulte https://github.com/angular/angular/blob/master/packages/core/src/view/view.ts#L332-L336
As outras respostas estão corretas e explicam por que esse é o caso: As consultas dependentes de diretivas estruturais, por exemplo, uma referência do ViewChild dentro de um ngIf, devem ser executadas após a resolução do condicional desta diretiva, ou seja, após a detecção de alterações. No entanto, pode-se usar com segurança static: true e, assim, resolver as consultas antes de ngOnInit para referências não aninhadas. No entanto, nesse caso em particular, mencionar como uma exceção nula provavelmente pode ser a primeira maneira de você encontrar essa particularidade, como foi para mim.
fonte
view child @angular 5+ token dois argumentos ('local reference name', static: false | true)
para saber a diferença entre verdadeiro e falso, verifique esta
fonte
No ng8, você pode definir manualmente quando acessar o componente filho no componente pai. Quando você define static como true, significa que o componente pai obtém apenas a definição do componente no
onInit
gancho: Por exemplo:Se estático for falso, você só obtém a definição em ngAfterViewInit (), em ngOnInit (), ficará indefinido.
fonte