Question

我试图创建一个模态组件并想要设置它，这样当用户点击转义时，模态就会关闭。但是，我似乎无法在组件工作上获得按键绑定。

我开始尝试主机绑定：

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

但除非我在我的组件的输入中，否则我从未看到任何记录。我将监听器更改为window:keypress并且我开始看到事件已记录，并且我想也许我可以将其设置为仅在模式打开时触发，但我认为我仍应该尝试弄清楚如何正确地执行它。另外，如果创建了多个模态，那么就会有多个窗口绑定，所有这些都做同样的事情，效率很低。

我不确定如何解决这个问题。

Answer 1

这里的问题是焦点。你的组件并不专注。因此，解决此问题的方法是在模板内部创建一个div并使其具有焦点。

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

和在组件

中

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

检查这个vanilla js示例

        <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>

无法在非事件元素上运行按键事件

1 个答案: