Hören Sie, klicken Sie auf <input> Komponente

Question

Ich benutze Angular 4.2.2 mit der ES6-Stil. Im Moment bin ich ratlos, wie ich meinen Code dazu bringen kann, eine Funktion auszuführen, wenn der Benutzer die EINGABETASTE drückt, während ein Feld den Fokus hat.

Im Moment sieht mein HTML so aus.

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

und meine Komponente Controller sieht so aus.

@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; 
     } 
    ) 
    } 
} 

Leider, wenn ich die Taste drücken ENTER, sehe ich nicht einmal „Run Search aufgerufen,“ auf der Konsole ausgegeben.

Kann jemand Ereignisse auf einer Eingabekomponente eingeben?

Jede Hilfe wird sehr geschätzt.

Answer 1

Für ENTER Schlüssel verwenden keyup.enter

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