如何在 Angular 9 中使用 Enter 键触发函数

Question

我有一个带有事件的按钮(click)，该事件当前在 Angular 组件中触发一个方法，该方法运行良好，但如果用户从输入框中按回车键，我也需要触发相同的方法，以便用户有选择。

这是我用于输入和按钮的 HTML：

<div class="input-group input-group-sm mt-3">
    <input autocomplete="off" list="autocompleteOff" type="text" class="form-control" placeholder="E.G. 'What is a beneficary?'" aria-label="Ask" [(ngModel)]="userQuestion" id="userQuestion" name="userQuestion" [ngStyle]="{'background-color': brand?.colours.secondary, 'color': brand?.colours.primary}">
    <div class="input-group-append">
      <button id="user-btn" class="btn btn-secondary" type="button" (click)="askQuestion()" [ngStyle]="{'background-color': brand?.colours.primary, 'color': brand?.colours.secondary}">Ask</button>
    </div>
  </div>

我可以在 HTML 端执行此操作吗？还是需要为 Enter 键设置一个侦听器？

Answer 1

您可以使用keyup.enter：

<input (keyup.enter)="askQuestion()"/>