En la mayoría de los casos querrás usar {static: false}
. Si se configura de esta manera, se garantizará que se encuentren coincidencias de consulta que dependen de la resolución de enlace (como las directivas estructurales *ngIf, etc...
).
Ejemplo de cuándo 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;
}
El static: false
va a ser el comportamiento de reserva por defecto en angular 9. Lea más aquí y aquí
La { static: true }
opción se introdujo para admitir la creación de vistas integradas sobre la marcha. Cuando crea una vista dinámicamente y desea acceder a ella TemplateRef
, no podrá hacerlo, ngAfterViewInit
ya que provocará un ExpressionHasChangedAfterChecked
error. Establecer el indicador estático en verdadero creará su vista en ngOnInit.
Sin embargo:
En la mayoría de los otros casos, la mejor práctica es usar {static: false}
.
Sin embargo, tenga en cuenta que la { static: false }
opción se hará predeterminada en Angular 9. Lo que significa que ya no es necesario configurar el indicador estático, a menos que desee utilizar la static: true
opción.
Puede usar el ng update
comando angular cli para actualizar automáticamente su base de código actual.
Para obtener una guía de migración e incluso más información sobre esto, puede consultar aquí y aquí
¿Cuál es la diferencia entre consultas estáticas y dinámicas?
La opción estática para consultas @ViewChild () y @ContentChild () determina cuándo estarán disponibles los resultados de la consulta.
Con consultas estáticas (static: true), la consulta se resuelve una vez que se ha creado la vista, pero antes de que se ejecute la detección de cambios. Sin embargo, el resultado nunca se actualizará para reflejar los cambios en su vista, como los cambios en los bloques ngIf y ngFor.
Con consultas dinámicas (static: false), la consulta se resuelve después de ngAfterViewInit () o ngAfterContentInit () para @ViewChild () y @ContentChild () respectivamente. El resultado se actualizará para los cambios en su vista, como los cambios en los bloques ngIf y ngFor.