else - ngif angular 6 example

Cómo comprobar si ngIf ha tenido efecto

Question

Que estoy haciendo
Tengo un componente que se oculta / muestra usando *ngIf basado en un booleano simple. Cuando el componente se vuelve visible, quiero aplicar el foco a un elemento secundario dentro de su plantilla.

El problema
Si cambio el valor booleano, el componente muestra correctamente, pero si trato de obtener una referencia al elemento hijo usando this._elRef.nativeElement.querySelector("div#test") , simplemente vuelve null . Si espero unos segundos, el mismo código devolverá la referencia al elemento como esperaba.

Especulación
Supongo que después de voltear el ángulo booleano pasa por un ciclo completo de representación para revelar el componente nuevo visible y que esto no ha terminado cuando aplico querySelector() en la siguiente línea.

Lo que me gustaría saber
Entonces, lo que me pregunto es, ¿cómo puedo estar seguro de que mi ngIf ha tenido efecto y que los elementos están en el DOM para ser seleccionados?
¿Existe una devolución de llamada para ngIf o puedo forzar la vista para actualizar y obtener una devolución de llamada de eso?

Espero que esto tenga sentido. Ha sido un día largo (semana larga) y estoy muy cansado.
Gracias a todos

Si ayuda, estoy usando Angular2 v2.0.0-beta.15

Answer 1

Si cambia el valor booleano a true y en la siguiente línea de código trata de obtener una referencia al componente o elemento DOM controlado por NgIf ... bueno, ese componente o elemento DOM aún no existe. Angular no se ejecuta en paralelo con su código. Tu devolución de llamada de JavaScript tiene que finalizar, luego se ejecuta Angular (detección de cambios), que notará que el valor booleano cambia y crea el componente o elemento DOM e lo inserta en el DOM.

Para solucionar su problema, llame a setTimeout(callbackFn, 0) después de voltear el valor booleano. Esto agrega su callbackFn a la cola de mensajes de JavaScript . Esto asegurará que Angular (detección de cambios) se ejecute antes de su función de devolución de llamada. Por lo tanto, cuando se ejecute su callbackFn , el elemento que desea enfocar ahora debería existir. El uso de setTimeout(..., 0) garantiza que se llame a callbackFn en el siguiente turno del ciclo de eventos de JavaScript .

Esta técnica de usar setTimeout(..., 0) se usa en la guía de desarrollo de enganches de LifeCycle cuando se habla de los ganchos AfterView * .

Aquí hay algunos otros ejemplos, si necesita más detalles:

• https://stackoverflow.com/a/35752722/215945 - usa el foco ()
• https://stackoverflow.com/a/34757864/215945 - usa Renderer para llamar al focus
• https://stackoverflow.com/a/36338181/215945 - usa una directiva para establecer el foco
• https://stackoverflow.com/a/34503163/215945 - muestra 4 formas diferentes de hacerlo

Answer 2

Esta pregunta es bastante antigua y es posible que la solución actual no esté disponible en ese momento.

El método setTimeout() es perfectamente viable, pero tiene un inconveniente significativo. Si simplemente configura una clase para posicionar un elemento, como yo lo hice, obtendrá un resultado sobresaliente, ya que el código se ejecuta después del bucle angular.

Usar ChangeDetectorRef produce un resultado que no salta.

Entonces en vez de esto:

class Foo {
  public isDisplayed = false;

  constructor(@Inject(ElementRef) private elementRef: ElementRef) {
  }

  public someMethod(): void {
     this.isDisplayed = true;
     setTimeout(() => {
         const child = this.elementRef.nativeElement.querySelector(''.child-element'');
         // ...
     });
  }
}

Podrías hacer esto:

class Foo {
  public isDisplayed = false;

  constructor(@Inject(ElementRef) private elementRef: ElementRef,
              @Inject(ChangeDetectorRef) private changeDetectorRef: ChangeDetectorRef) {
  }

  public someMethod(): void {
     this.isDisplayed = true;
     this.changeDetectorRef.detectChanges();
     const child = this.elementRef.nativeElement.querySelector(''.child-element'');
     // ...
  }
}