Angular 2：检查单击元素时是否按下了 Shift 键

Answer 1

在

(click)

绑定中，将

$event

对象传递给

toggleSelected

方法：

<div class="item" *ngFor="#obj of available" (click)="toggleSelected(obj, $event)"></div>

在

toggleSelected

方法中，检查事件的

shiftKey

属性是否为

true

：

toggleSelected(obj, event) {
  if (event.shiftKey) {
    // do this
  } else {
    // do that
  }
}

Answer 2

您的问题可能涉及到表格记录的多选选项。

在这种情况下，您可以将选定的对象存储在一个集合中。

public selectedRowSet: Set<MyObject> = new Set();    

每次选择一条记录时，您可以使用以下方法将它们添加到集合中。

public setSelectedRow(obj: MyObject, event: MouseEvent) {
  if(!event.shiftKey) {
    selectedRowSet.clear();
  }
  selectedRowSet.add(obj);
}

那么您可能想添加条件格式。

public isRowSelected(obj: MyObject): boolean
{
  return selectedRowSet.has(obj);
}

在您看来使用：

<tr *ngFor="let obj of myObjectCollection" 
    [class.someCssClass]="isRowSelected(obj)" 
    (click)="setSelectedRow(obj, $event);">
...
</tr>

---

评论

以下是一些可能有用的额外调整：

• 您可以选择使用 Shift 或 Ctrl 或 ⌘（适用于苹果）
• 按下此键也可以取消选择记录。

我希望这对某人有用。

public setSelectedRow(bo: Bo, event: MouseEvent) {
  // support shift, control and the command key.
  const add = event.shiftKey || event.ctrlKey || event.metaKey;
  if (!add) {
    this.selectedRowSet.clear();
    this.selectedRowSet.add(bo);
    return;
  }

  // toggle selected record
  if (this.selectedRowSet.has(bo)) {
    this.selectedRowSet.delete(bo);
  }
  else {
    this.selectedRowSet.add(bo);
  }
}

Answer 3

实际答案是 keyboard 事件内置了这个。

<input (keydown)="onKey($event)"` ...

例如，在某个字段内聚焦，请按住 Shift 键，然后再按住另一个键。

键盘事件包含

shiftKey: boolean

Answer 4

致@Michael Liu，

在我的试用中，我发现

当我使用以下代码按下
1. shift

    键时，未检测到 

   shift

   键。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <input type="text" (keyup)="updateField($event)" />
  `,
})
export class AppComponent {
  title = 'app-project';
  updateField(event: KeyboardEvent): void {
    
    // if (event.altKey && event.key === 'ShiftLeft') {
    if (event.shiftKey) {
      console.group('updateField in AppComponent class when the user pressed alt and left shift key at same time in the text field.');
      console.log('The user pressed alt and left shift key at same time in the text field.');
      console.groupEnd();
    } 
  }
}

Answer 5

使用

keypress

<div class="item" *ngFor="#obj of available" (keypress)="eventHandler($event)"></div>

eventHandler(event) {
   console.log(event, event.keyCode, event.keyIdentifier);
}