在Angular 5 TypeScript中触发keyup事件

Question

我们已经使用JavaScript / jQuery以编程方式轻松触发了按键/按下/按下事件。

$(function() {
    $('item').keydown();
    $('item').keypress();
    $('item').keyup();
    $('item').blur();
});

但是，使用Angular 5和TypeScript，我们该怎么做呢？

//I am setting value programmatically -> working
document.getElementById('custom_Credit').setAttribute('value', coinsToBuy);    
//setting focus -> working
document.getElementById('custom_Credit').focus();
//but there are no way to generate or trigger keypress/up events.
document.getElementById('custom_Credit')..........;

Answer 1

在您的app.component.html文件中，定义DOM元素上的事件

<input (keyup)="onKeyup($event)" (keydown)="onKeydown($event)" #userName></input>

在您的app.component.ts文件中，获取元素ref并调度一个事件，还使事件处理程序相同

export class AppComponent {
 @ViewChild('userName') userInput: ElementRef;
 constructor() {}


someFunction(){
  let event = new KeyboardEvent('keyup',{'bubbles':true});
  this.userInput.nativeElement.dispatchEvent(event);
}

 onKeyup(event){
   console.log(event)
 }

 onKeydown(event){
   console.log(event)
 }

}