REVIEW

Question

在Angular 2应用程序中，我希望点击事件在按住Shift键时触发不同的内容。如何实现这个目标？

html如下：

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

我想做这样的事情：

  toggleSelected(obj) {
    if(shift is pressed) {
      do this
    } else {
      do that
    }
  }

那么如何检测是否按下了shift键？谢谢！

Answer 1

在Show()绑定中，将(click)对象传递给$event方法：

toggleSelected

在<div class="item" *ngFor="#obj of available" (click)="toggleSelected(obj, $event)"></div>方法中，检查事件的toggleSelected属性是否为shiftKey：

true

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>

REVIEW

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

您可以选择使用 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事件是内置的。

[2, 3, 5, 7, 11, 13, 17, 19, 23, ........ ]

例如，将焦点放在一个字段内，按住Shift键，然后再按下另一个键。

键盘事件包含<input (keydown)="onKey($event)"` ...

Answer 4

使用keypress

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

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

Angular 2：单击元素时检查shift键是否关闭

4 个答案:

REVIEW