Angular 5 TypeScript中的触发器keyup事件

我们已经使用JavaScript/jQuery以编程方式轻松触发了keypress/down/up事件

$（函数（）{
$（'item'）.keydown（）；
$（'item'）.keypress（）；
$（'item'）.keyup（）；
$（'item'）.blur（）；
});

但是有了Angular 5和TypeScript，我们怎么能做到呢

//我正在以编程方式设置值->工作
document.getElementById（'custom_Credit'）.setAttribute（'value'，coinsToBuy）；
//设置焦点->工作
document.getElementById（'custom_Credit'）.focus（）；
//但无法生成或触发按键/向上事件。
文件。getElementById（“自定义信用证”）。。。。。。。。。。；

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

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

---

如果您想在HTML中收听角度事件，可以这样做：

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

这是最常见的方式

您还可以获得角度的元素引用。首先在元素上添加#值：

<button #myButton>

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

然后您应该能够调用本机元素上的方法：

<button #myButton>

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

---

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

这与javascript与typescript无关。Typescript基本上是一样的。区别在于jQuery与angular

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

<button #submitButton ...>

然后，要触发单击，可以执行以下操作：

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

只需确保不要过早打电话。如果我没有弄错的话，ViewRef仅在

AfterViewInit

angular lifecycle事件之后可用

---

这也应该有助于聚焦。其他事件可能有点棘手，但您有原生dom元素，因此基本上您只需要了解如何在没有jquery的情况下在原生dom元素上触发所需事件。如果需要，可以参考以下答案：

使用

Document

api直接访问DOM不是一种好的做法。也不建议对其使用jQuery。Angular有自己的方法。改用

（单击）

事件。像这样

你能让事件直接写在元素上吗？@SiddAjmera因为输入有一个带有

KeyUp

事件的活动，所以我想触发它。我知道，我可以调用

（单击）

并调用由

键控调用的函数。请让我知道是否有办法称之为。该活动已绑定。但从另一个角度来看，我想以编程方式触发（keyup）事件。IE不支持KeyboardEvent构造函数
export class FooComponent {
    @ViewChild('submitButton')
    submitButtonRef: ElementRef;

    emitClick() {
         // ...
    }
}

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