Question

我正在使用ESular风格的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)">

听取输入<input />组件的点击

1 个答案: