javascript - 监听 <input> 组件上的输入点击

Question

我正在使用 Angular 4.2.2 和 ES6 风格。现在，当用户在字段获得焦点时按下 ENTER 键时，我不知道如何让我的代码运行函数。

现在，我的 html 看起来像这样。

  <div class="box" id="redbox" class="app-flex-item"><!-- flex item -->
    <input id="searchTermInput" class="search-input"  ng-keydown="runSearch($event)">
  </div>

我的组件 Controller 看起来像这样。

@Component({
    ...
})
export class AppComponent {

  runSearch(ev): void {
    console.log("Run Search Invoked");
    this.searchResultService.getHeroesSlowly().then(searchResponseResult => {
        this.searchResponseResult = searchResponseResult;
        this.searchResults = searchResponseResult.searchResults;
        this.showDivider = true;
      }
    )
  }
}

不幸的是，每当我按下 ENTER 键时，我什至都看不到“Run Search Invoked”输出到控制台。

有人知道如何监听输入组件上的输入事件吗？

非常感谢任何帮助。

Answer 1

对于 ENTER 键，请使用 keyup.enter

  <input id="searchTermInput" #box (keyup.enter)="runSearch(box.value)">