Impossible d'obtenir un événement keypress sur un élément non-événement fonctionnant

Question

J'essaye de créer un composant modal et je veux le configurer ainsi quand un utilisateur clique sur échappement, le modal se ferme. Cependant, je ne peux pas sembler obtenir une liaison de pression sur le composant fonctionnant.

j'ai commencé en essayant une foule de liaison:

@HostListener('keypress', ['$event']) public escapePressed(key) { 
    console.log(key); 
} 

mais je ne vois rien connecté à moins que je suis dans une entrée dans mon élément. J'ai changé l'écouteur en window:keypress et j'ai commencé à voir les événements enregistrés, et j'ai pensé que je pourrais le configurer pour ne déclencher que si un modal est ouvert, mais je pensais que je devrais encore essayer de comprendre comment le faire correctement. De plus, si plusieurs modaux ont été créés, il y aura plusieurs liaisons de fenêtres, toutes faisant la même chose, ce qui est inefficace.

Je ne sais pas comment résoudre ce problème.

Answer 1

Le problème ici est le focus. votre composant n'est pas focalisé. Donc, la solution pour ce problème sera de créer un modèle div à l'intérieur et de le rendre focalisable.

<div id="rootdiv" tabindex="0" (keypress)="dosomething($event)" > 
    <!-- other elements here --> 
</div> 

et dans les composants

dosomething(e){ 
    if(e.keyCode == 27){ 
     //do something 
    } 
} 

vérifier ce l'exemple de la vanille

 <script> 
      function doit(e){ 
       console.log("called") 
      } 
     </script> 
     <div id="container" tabindex="0" onkeypress="doit(e)"> 
      <input type="text" > 
     </div> 
     <style> 
      *{ 
       margin:0; 
      } 
      #container{ 
       display: flex; 
       height: 100vh; 
       width: 100vw; 
      } 

     </style> 
     <script> 
      var div = document.getElementById('container') 
      div.focus() 
     </script>