Angular 全局监听键盘事件

  • 技术点:使用EventManager
  • 根模块中不要引用,组件模块中引用
    import { EventManager } from '@angular/platform-browser';
  • 组件constructor中实例化对象
    constructor(private eventManager:EventManager){}
  • ngOnInit中注册全局监听
ngOnInit(): void {
	this.eventManager.addGlobalEventListener('window','keyup.esc',()=>{
	  alert('你点击了ESC');
	});
}

上面的代码是监听当WEB页面中按下esc按键,则会弹出模态提示框,完整代码如下

 import { Component, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { EventManager } from '@angular/platform-browser';
    
    
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent implements OnInit {
   ngOnInit(): void {
     this.eventManager.addGlobalEventListener('window','keyup.esc',()=>{
       alert('你点击了ESC');
     });
   }
 
   constructor(
     private eventManager:EventManager
   ){}
 }
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值