¿Cómo debo configurar la nueva vista secundaria de Angular 8?
@ViewChild('searchText', {read: ElementRef, static: false}) public searchTextInput: ElementRef;contra
@ViewChild('searchText', {read: ElementRef, static: true}) public searchTextInput: ElementRef; ¿Cual es mejor? ¿Cuándo debo usar static:true vs static:false ?
ver child @angular 5+ token dos argumentos ('nombre de referencia local', estático: falso | verdadero)
@ViewChild('nameInput', { static: false }) nameInputRef: ElementRef;para saber la diferencia entre verdadero y falso marca esto
estático: si resolver o no los resultados de la consulta antes de que se ejecute la detección de cambios (es decir, devolver solo resultados estáticos). Si no se proporciona esta opción, el compilador volverá a su comportamiento predeterminado, que consiste en utilizar los resultados de la consulta para determinar el tiempo de resolución de la consulta. Si los resultados de alguna consulta están dentro de una vista anidada (p. ej., *ngIf), la consulta se resolverá después de que se ejecute la detección de cambios. De lo contrario, se resolverá antes de que se ejecute la detección de cambios.
En ng8, puede configurar manualmente cuándo acceder al componente secundario en el componente principal. Cuando establece static en verdadero, significa que el componente principal solo obtiene la definición del componente en el gancho onInit : por ejemplo:
// You got a childComponent which has a ngIf/for tag ngOnInit(){ console.log(this.childComponent); } ngAfterViewInit(){ console.log(this.childComponent); }Si static es falso, solo obtiene la definición en ngAfterViewInit(), en ngOnInit(), obtendrá indefinido.
Entonces, como regla general, puede optar por lo siguiente:
{ static: true } debe establecerse cuando desee acceder a ViewChild en ngOnInit .
Solo se puede acceder a { static: false } en ngAfterViewInit . Esto también es lo que desea buscar cuando tiene una directiva estructural (es decir *ngIf ) en su elemento en su plantilla.
De los documentos angulares
estático : si resolver o no los resultados de la consulta antes de que se ejecute la detección de cambios (es decir, devolver solo resultados estáticos). Si no se proporciona esta opción, el compilador volverá a su comportamiento predeterminado, que consiste en utilizar los resultados de la consulta para determinar el tiempo de resolución de la consulta. Si los resultados de alguna consulta están dentro de una vista anidada (p. ej., *ngIf), la consulta se resolverá después de que se ejecute la detección de cambios. De lo contrario, se resolverá antes de que se ejecute la detección de cambios.
Puede ser una mejor idea usar static:true si el niño no depende de ninguna condición. Si la visibilidad del elemento cambia, entonces static:false puede dar mejores resultados.
PD: Dado que es una característica nueva, es posible que necesitemos ejecutar puntos de referencia para el rendimiento.
Como mencionó @Massimiliano Sartoretto, la confirmación de github puede brindarle más información.
Vine aquí porque ViewChild era nulo en ngOnInit después de actualizar a Angular 8.
Las consultas estáticas se completan antes de ngOnInit, mientras que las consultas dinámicas (estáticas: falsas) se completan después. En otras palabras, si un viewchild ahora es nulo en ngOnInit después de configurar static: false, debería considerar cambiar a static: true o mover el código a ngAfterViewInit.
Consulte https://github.com/angular/angular/blob/master/packages/core/src/view/view.ts#L332-L336
Las otras respuestas son correctas y explican por qué este es el caso: las consultas que dependen de las directivas estructurales, por ejemplo, una referencia ViewChild dentro de un ngIf, deben ejecutarse después de que se haya resuelto el condicional de esta directiva, es decir, después de la detección de cambios. Sin embargo, uno puede usar con seguridad static: true y así resolver las consultas antes de ngOnInit para referencias no anidadas. En mi humilde opinión, vale la pena mencionar este caso particular como una excepción nula, probablemente podría ser la primera forma en que encontrará esta particularidad, como lo fue para mí.
Ver niño
... Puede usarlo como referencia de elemento de plantilla.
...para fuera de la referencia de un componente en particular.
Con sintaxis de estilo decorador.. @ViewChild( selector) reference : ElementRef || QueryList.
De referencia específica de componente o elemento.
Úselo en AfterViewInIt() .
Podríamos usarlo en Oninit() .
Pero esto es específico para usar ngAfterViewInit() .
Por último, {static : false} debe colocarse en @ViewChild( Useme , { static : false}) ... para referencia de variables de plantilla.
La variable en el archivo de plantilla parece. #Useme .