Angular待办应用如何实现按下键盘Enter键保存新增待办项

直接在现有输入框标签上新增(keyup.enter)="saveTodo()"的事件绑定即可，不需要修改组件中已有的saveTodo()业务逻辑，也不需要额外编写原生键盘监听代码。

修改后的输入框完整代码：

<input 
  type="text" 
  class="form-control" 
  placeholder="Enter Todo" 
  aria-label="Enter Todo" 
  aria-describedby="button-addon2" 
  [(ngModel)]="newTodo"
  (keyup.enter)="saveTodo()"
>

注意点 #

• keyup.enter是Angular内置的按键事件过滤语法，仅当输入框处于聚焦状态、用户按下并松开Enter键时才会触发绑定方法，不会响应其他按键操作
• 该方案完全复用已有的添加待办逻辑，和点击「Add Todo」按钮的执行路径完全一致，后续你给saveTodo()增加空内容拦截、重复项校验等逻辑时，两种触发方式都会自动适配
• 不要给document全局绑定Enter键盘事件，仅给输入框绑定事件即可，避免用户在页面其他区域操作按Enter时误添加待办

内容的提问来源于stack exchange，提问作者nwake