在 Angular 5 TypeScript 中触发 keyup 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52626631/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trigger keyup event in Angular 5 TypeScript
提问by Abdur Rahim
We have triggered keypress/down/up events programmatically easily with JavaScript/jQuery.
我们使用 JavaScript/jQuery 以编程方式轻松触发了按键/向下/向上事件。
$(function() {
$('item').keydown();
$('item').keypress();
$('item').keyup();
$('item').blur();
});
But with Angular 5 and TypeScript, how can we do that?
但是使用 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')..........;
回答by Sarthak Aggarwal
In your app.component.html file, define events on DOM elements
在 app.component.html 文件中，定义 DOM 元素上的事件
<input (keyup)="onKeyup($event)" (keydown)="onKeydown($event)" #userName></input>
In your app.component.ts file , get element ref and dispatch an event, also make event handlers for the same
在您的 app.component.ts 文件中，获取元素引用并分派事件，还为相同的事件创建事件处理程序
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)
}
}
回答by JeffryHouser
If you want to listen to an Angular event in HTML, you can do so like this:
如果你想在 HTML 中监听 Angular 事件，你可以这样做：
<button (click)="eventHandler($event)">
Inside your component's TypeScript class, you have your method:
在组件的 TypeScript 类中，您有自己的方法：
eventHandler(event){
console.log(event);
}
That is the most common way.
这是最常见的方式。
You can also get an element reference in Angular. Start by adding the #value on the element:
您还可以在 Angular 中获取元素引用。首先在元素上添加#value：
<button #myButton>
The #MyButtonsyntax allows you to reference the child in code using the @ViewChildmetadata:
该#MyButton语法允许您使用引用孩子码@ViewChild元数据：
@ViewChild('myButton')
myButton: ElementRef;
Then you should be able to call the methods on the native element:
然后你应该能够调用原生元素上的方法：
myButton.nativeElement.keydown();
myButton.nativeElement.keypress();
myButton.nativeElement.keyup();
myButton.nativeElement.blur();
I haven't actually tested this, as it is rare in Angular to try to access the underlying DOM events as opposed to using Angular's encapsulation of them.
我还没有实际测试过这个，因为在 Angular 中很少尝试访问底层 DOM 事件，而不是使用 Angular 对它们的封装。
回答by tom van green
This has nothing to do with javascript vs typescript. Typescript is basically the same. The distinction is rather jQuery vs angular.
这与 javascript 与 typescript 无关。打字稿基本相同。区别在于 jQuery 与 angular。
Mark your button with an id, so we can access it from the component.
用 id 标记您的按钮，以便我们可以从组件访问它。
<button #submitButton ...>
In your component you can use a ViewChild decorator to access this element.
在您的组件中，您可以使用 ViewChild 装饰器来访问此元素。
export class FooComponent {
@ViewChild('submitButton')
submitButtonRef: ElementRef;
emitClick() {
// ...
}
}
Then to trigger the click you can do following:
然后要触发点击，您可以执行以下操作：
emitClick() {
this.submitButtonRef.nativeElement.click();
}
Just make sure that you don't call emitClick to early. ViewRef is only available after the AfterViewInitangular lifecycle event if I'm not mistaken.
只要确保你不要提前调用emitClick。AfterViewInit如果我没记错的话，ViewRef 仅在angular 生命周期事件之后可用。
This should also work for focus. Other events might be a bit trickier, but you have the native dom element, so basically you just need to find out how to trigger the desired event on a native dom element without jquery. If you need that you could refer to this answer: trigger custom event without jQuery
这也应该适用于焦点。其他事件可能有点棘手，但是您拥有本机 dom 元素，因此基本上您只需要找出如何在没有 jquery 的本机 dom 元素上触发所需的事件。如果你需要，你可以参考这个答案：trigger custom event without jQuery
