如何在 angular 应用程序中使用键盘上的删除按钮和上下按钮

Question

我正在尝试构建一个待办事项应用程序该应用程序有待完成的任务列表这些任务也可以删除该应用程序可通过鼠标点击正常运行我如何让应用响应按键

我希望应用程序在按下向下箭头时在列表中向下移动并在按下向上箭头时上升

按下键时将焦点放在元素上

一旦聚焦，我必须能够按 enter 键将任务标记为已完成，然后按 delete 键删除任务

app.html

<input type="text" class="todo-input" placeholder="What needs to be done" [(ngModel)]="todoTitle" (keyup.enter)="addTodo()">
<todo-item *ngFor="let todo of todoService.todosFiltered()" [todo]="todo">
 </todo-item>

待办事项-item.html

<div class="todo-item">
<div class="todo-item-left">
<input type="checkbox" [(ngModel)]="todo.completed">
<div  class="todo-item-label" [ngClass]="{ 'completed' : todo.completed }"{{ todo.title }}</div>

</div>
<div class="remove-item" (click)="todoService.deleteTodo(todo.id)" >
&times;
</div>
</div>

Answer 1

在您的 *ngFor 中，您可以使用 (keydown.arrowup)=clickArrowup($event) 处理向上箭头事件，使用 (keydown.arrowdown)=clickArrowdown($event) 处理按下箭头按钮时发出的事件。以同样的方式，您可以使用 (keydown.enter)=clickEnter($event) 的输入按钮处理事件，并使用 (keydown.backspace)=clickBackspace($event).

删除

或者，您可以像这样在 html 模板中传递单个函数：(keydown)=onKeydown($event) 并在您的 ts:

onKeydown(event) { 

if (event.key === "Enter") { console.log(event); }

if (event.key === "Backspace") { console.log(event); } 

if (event.key === "ArrowUp") { console.log(event); } 

if (event.key === "ArrowDown") { console.log(event); } 

}

希望能帮到你。

Answer 2

您可以使用 @HostListeners 来监听键盘事件并根据需要使用它。

@HostListener('window:keydown.arrowup', ['$event'])
@HostListener('window:keydown.arrowdown', ['$event'])

您可以参考下面的项目，它使用箭头键在待办事项列表中导航， https://stackblitz.com/edit/angular-ivy-2ejnaz

您还可以阅读更多关于 Angular HostListners 的信息， https://angular.io/api/core/HostListener

如何在 angular 应用程序中使用键盘上的删除按钮和上下按钮

How do I use delete button and up and down button from keyboard in an angular app

keypress

angular