使用快捷键加载角度组件

Question

我需要使用短键来加载角度组件。

我想用于此目的的快捷键是".">

如果在加载角度组件时按下句点，则单击"."字符时，我要加载角度组件。

但是，我想确保当我在表单字段上输入任何值时不会触发角度组件。

简而言之，只有在任何特定表单字段上未激活时，才应触发按键。我应该检查什么条件以确保在按下键时用户在该组件的任何表单字段上都处于活动状态。

以下是我必须侦听键关闭事件并标识按下的键的代码。

@HostListener('document:keydown', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
alert('Key pressed was :::: ' + (event.key === "."))
alert('Key was pressed');
}

Answer 1

我想您可以在目标body时检查用户是否正在按下句点，因此您可以尝试以下操作：

@HostListener('document:keydown', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
if (event.key === "." && ((event.target as HTMLElement).tagName === "BODY")) {
alert('period pressed outside fields!')
}
}

演示：堆栈闪电战

Answer 2

你可以尝试这样的事情：

@HostListener('document:keydown', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
if(event.target.tagName === 'INPUT') {
console.log('input clicked');
return;
}
console.log('Key pressed was :::: ' + (event.key === "."))
console.log('Key was pressed');
}