在 Angular 5 TypeScript 中触发 keyup 事件

Posted

技术标签:

【中文标题】在 Angular 5 TypeScript 中触发 keyup 事件【英文标题】:Trigger keyup event in Angular 5 TypeScript 【发布时间】:2019-03-08 15:50:26 【问题描述】:

我们使用 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')..........;

【问题讨论】:

使用Document API 直接访问 DOM 不是一个好习惯。也不建议使用 jQuery。 Angular 有它自己的方式来做到这一点。请改用(click) 事件。像这样<div (click)="eventHandler()"></div> 你可以让事件直接写在元素上吗? @SiddAjmera 由于输入具有KeyUp 事件的活动,所以我想触发它​​。我知道,我可以调用(click) 并调用KeyUp 调用的那个函数。请让我知道是否有办法调用它。 【参考方案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)
 


【讨论】:

该事件已绑定。但从另一个角度来看,我想以编程方式触发 (keyup) 事件。 IE 不支持KeyboardEvent 构造函数【参考方案2】:

如果你想在 HTML 中监听 Angular 事件,你可以这样做:

<button (click)="eventHandler($event)">

在组件的 TypeScript 类中,您有自己的方法:

eventHandler(event)
  console.log(event);

这是最常见的方式。

您还可以在 Angular 中获取元素引用。首先在元素上添加#value:

<button #myButton>

#MyButton 语法允许您使用 @ViewChild 元数据在代码中引用子项:

@ViewChild('myButton')
myButton: ElementRef;

那么你应该可以调用原生元素上的方法了:

myButton.nativeElement.keydown();
myButton.nativeElement.keypress();
myButton.nativeElement.keyup();
myButton.nativeElement.blur();

我还没有实际测试过,因为在 Angular 中很少尝试访问底层 DOM 事件,而不是使用 Angular 对它们的封装。

【讨论】:

得到Uncaught TypeError: ...nativeElement.keyup is not a function 那个语法看起来不对;所以也许你需要类似keyup.addEventListener('keyup', handlerfunction); 好,谢谢【参考方案3】:

这与 javascript 与 typescript 无关。打字稿基本相同。区别在于 jQuery 与 Angular。

用 id 标记您的按钮,以便我们可以从组件中访问它。

<button #submitButton ...>

在您的组件中,您可以使用 ViewChild 装饰器来访问此元素。

export class FooComponent 
    @ViewChild('submitButton')
    submitButtonRef: ElementRef;

    emitClick() 
         // ...
    

然后要触发点击,您可以执行以下操作:

emitClick() 
    this.submitButtonRef.nativeElement.click();

请确保您没有提前调用 emitClick。如果我没记错的话,ViewRef 仅在 AfterViewInit 角度生命周期事件之后可用。

这也应该适用于焦点。其他事件可能有点棘手,但你有原生 dom 元素,所以基本上你只需要找出如何在没有 jquery 的原生 dom 元素上触发所需的事件。如果你需要,你可以参考这个答案:trigger custom event without jQuery

【讨论】:

以上是关于在 Angular 5 TypeScript 中触发 keyup 事件的主要内容,如果未能解决你的问题,请参考以下文章

在 Angular 4/5 和 TypeScript 中重新加载同一页面

如何在ASP.NET 5上搭建基于TypeScript的Angular2项目

Angular 5 - 在 TypeScript 中翻译字符串

在 Angular 5 TypeScript 中触发 keyup 事件

如何在 Typescript 类中创建 Angular 5 HttpClient 实例

Angular 5 Typescript - 保存本地 JSON 文件