无法使非事件元素上的按键事件正常工作

Question

我正在尝试创建一个模态组件，并希望将其设置为当用户点击escape时，该模态关闭。然而，我似乎无法让组件上的按键绑定正常工作。

我开始尝试主机绑定：

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

查看这个香草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>