Angular 4 - 同时处理两个事件

Question

我想在我的 component.ts 文件中的同一函数中处理单击事件 + CTRL 按键事件，但我似乎没有在任何地方找到解决方案。我试过:

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

<罢工>