收听输入，单击<input>组件

Question

我使用的是ES6风格的Angular 4.2.2。现在，当用户在字段具有焦点的情况下按ENTER键时，如何使我的代码运行功能时，我感到茫然。

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

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

我的组件控制器看起来像这样。

@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)">