在 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 事件