Angular 4 - 同时处理两个事件

Question

我想在我的 component.ts 文件中的同一个函数中处理 click 事件 + CTRL keypress 事件，但我似乎没有在任何地方找到解决方案。我试过了：

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

但它只返回“错误类型错误：无法读取未定义的属性‘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属性，允许Ctrl在点击发生时读取关键状态的状态

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

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/ctrlKey

只需将控制键的状态存储在一个字段中并在点击事件中读取它：

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