从(按键)angular2获取按键

Question

在Angular 2中使用(按键)时,是否可以找出按下了哪个键？

例如

<input type=text (keypress)=eventHandler()/>

public eventHandler() {
    //Some code
    console.log(keyPressed);
}

编辑:似乎我的命名约定有点偏.我不是指AngularJS 2,我的意思是带有打字稿的Angular 2.0.

Answer 1

传递$event给您的事件处理程序.这$event是一个DOM KeyboardEvent.

<input type=text (keypress)="eventHandler($event)">

eventHandler(event) {
   console.log(event, event.keyCode, event.keyIdentifier);
} 

如果您知道所需的KeyboardEvent属性,可以将其传递给事件处理程序:

<input type=text (keypress)="eventHandler($event.keyCode)">

eventHandler(keyCode) {...}

Answer 2

@Component({
  selector: 'key-up3',
  template: `
    <input #box (keyup.enter)="onEnter(box.value)">
    <p>{{value}}</p>
  `
})
export class KeyUpComponent_v3 {
  value = '';
  onEnter(value: string) { this.value = value; }
}

或者像这样使用..

 <input #box (keyup.enter)="onSubmit(form.value)">
 <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">

Answer 3

根据对答案的评论：

这不会检测到所有事件。例如不是箭头键或转义键。但是您可以使用 (keydown) 来获取所有这些。

获得退格和删除或任何键的所有事件的最佳解决方案，只需使用（输入）

<input type=text (input)="eventHandler($event.keyCode)">

eventHandler(keyCode) {...}