typescript 如何合并keydown.control与自定义点击功能在Angular ？

uyto3xhc 于 2023-03-04 发布在 TypeScript

关注(0)|答案(1)|浏览(77)

如何通过 * 按下 * control key (CTRL)并 * 单击 * 元素（例如从5中选择2和4）以随机顺序选择 * 多个 * 数字元素并将它们存储到数组中？经过多次尝试，我无法将单击事件与@Hostlistener组合。

<div class="nums">
   <div *ngFor="let tempNum of [1, 2, 3, 4, 5]">
      <span class="num" (click)="onNumClick(tempNum)">{{ tempNum }}</div>
   </div>
</div>

@Hostlistener('window.keydown.control', ['$event'])
onKeyDown(event: KeyboardEvent) {
   console.log('Control key clicked');
}

onNumClick(num: number) {
   this.selectedNums.push(num);
}

typescript

来源：https://stackoverflow.com/questions/75579741/how-to-combine-keydown-control-with-a-custom-click-function-in-angular

1条答案

按热度按时间

enxuqcxy1#

一个非常简单的解决方案应该是这样的--只需要检查click事件是否设置了ctrlKey标志，并相应地修改行为。

<div class="nums">
  <div *ngFor="let num of [1, 2, 3, 4, 5]">
      <span class="num" 
      (click)="select(num, $event.ctrlKey)">{{ num }}</span>
  </div>
</div>

注意，我使用Set而不是数组，以方便地避免重复。

readonly selectedNums = new Set<number>();

select(num: number, selectMulti: boolean): void {
    if (!selectMulti) {
        this.selectedNums.clear();
    }
    this.selectedNums.add(num);
}

请记住，这显然不能在移动的设备上使用，对于移动用户，你必须提供一个替代方案，如复选框或长按。

赞(0）回复(0）举报 2023-03-04

我来回答

typescript 如何合并keydown.control与自定义点击功能在Angular ？

1条答案

相关问题

热门标签

最新问答