要在 Angular 7 的 div 元素上添加 keydown 事件,你可以使用 Angular 的 HostListener 装饰器来实现。
下面是一个示例,演示如何为 div 元素添加 keydown 事件:
import { Component, HostListener } from '@angular/core';
@Component({
selector: 'app-my-component',
template: 'Press a key inside this div'
})
export class MyComponent {
@HostListener('window:keydown', ['$event'])
onKeyDown(event: KeyboardEvent) {
console.log('Key pressed:', event.key);
}
}
在这个示例中,我们将 keydown 事件绑定到 window 对象上,并通过 $event
参数来接收事件对象。你也可以将 window:keydown
替换为 document:keydown
或 body:keydown
,具体取决于你希望监听的元素。
app-my-component
组件:
当你在 div 元素内按下一个键时,控制台会输出相应的键值。
希望这个示例能帮助到你解决问题!