Angular 4 - 同时处理两个事件

Question

我想在我的component.ts文件的同一个函数中处理一个click事件+ CTRL按键事件，但我似乎无法在任何地方找到解决方案。我已经试过：

@HostListener("click") 
    onDropdownItemClick(evt: keyboardEvent) { 
     console.log(evt.keyCode); 
    } 

，但它只是返回“错误类型错误：无法读取属性未定义‘键代码’”

我也试过这太：

@Component({ 
     selector: '....', 
     templateUrl: '....', 
     host: { 
      '(window:keydown)': 'findKey($event)', 
      '(window:mousedown)': 'findKey($event)' 
     } 
    }); 

findKey(event) { 
     if(event.ctrlKey && event.which === 1){ 
       console.log("CTRL + mouse-click"); 
     } 
    } 

但它的不工作。任何人都有关于如何同时捕获这两个事件的建议？

Answer 1

的MouseEvent事件提供了一个ctrlKey属性，它允许读取当点击发生

@HostListener("click", ['$event']) 
onDropdownItemClick(evt: MouseEvent) { 
    console.log('clicked - with ctrl pressed:', evt.ctrlKey); 
} 

​​

只存储控制键的状态 按Ctrl键状态的状态并在点击事件中读取：

ctrlDown = false; 

@HostListener('window:keydown.ctrl') 
onCtrlDown() {this.ctrlDown = true; } 

@HostListener('window:keydown.ctrl') 
onCtrlUp() {this.ctrlDown = false; } 

@HostListener("click") 
onDropdownItemClick(evt: keyboardEvent) { 
    console.log('clicked - with ctrl pressed:', this.ctrlDown); 
} 

如果上述方法无效，请尝试

@HostListener('window:keydown', ['$event']) 
onCtrlDown(event) {this.ctrlDown = event.ctrlKey; } 

@HostListener('window:keydown') 
onCtrlUp() {this.ctrlDown = false; }