web-dev-qa-db-fra.com

Déclencher un événement lorsque l'élément devient visible avec ngIf

J'ai des divs avec ngIf, je veux juste avoir un moyen de savoir si le div particulier est celui qui est visible/actif en ce moment comme un déclencheur d'événement comme focus (cela ne fonctionne pas) ou quelque chose, et avec cet événement, je vais définir une variable ou quelque chose.

<div *ngIf="test === true" (focus)="myVariable = true">
</div>
javascriptangularevent-handlingdom-eventsangular-event-emitter
6
Manzur Khan

Je voudrais m'appuyer sur la réponse de Rachit.

<div *ngIf="test"><ng-container *ngIf="runShow && show()"></ng-container></div>

et dans le composant

this.runShow = true;

//show always returns true.
show() {
  //Return if not running. Shouldn't be needed as runShow proceeds show in the template.
  if(!this.runShow) {
    return true;
  }
  //Do modifications...

  this.runShow = false;
  return true;

show() ne fonctionnera que si le test est véridique, et se désactivera après une seule itération (bien sûr, vous pouvez changer this.runShow pour être basé sur quelque chose). Un problème important est que jusqu'à this.runShow == false, Cela s'exécutera à chaque fois que le composant détectera un changement, ni plus ni moins. Nous mettons le show () dans son propre ng-container afin qu'il n'ait pas d'impact sur le DOM et qu'il soit exécuté après le rendu du test.

1
Cameron Burger

Cela peut être une solution possible. Ce n'est peut-être pas le meilleur mais ça marchera.

Dans le fichier html,

<div *ngIf="show()"> </div>

Dans le fichier TS du composant,

show(){
  if(test){ //condition for showing the div
    myVariable = true; 
    return true;
  }
  else
    return false;
}
1
Rachit Shroff