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

如果您想听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对其进行封装。

Answer 2

这与javascript与打字稿无关。 Typescript基本相同。区别是jQuery vs angular。

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

<button #submitButton ...>

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

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

    emitClick() {
         // ...
    }
}

然后触发点击，您可以执行以下操作：

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

只需确保您不早点调用emitClick。如果我没有记错的话，只有在AfterViewInit角度生命周期事件之后才能使用ViewRef。

这也应该使焦点集中。其他事件可能会有些棘手，但是您拥有本地dom元素，因此基本上，您只需要了解如何在没有jquery的情况下在本地dom元素上触发所需的事件。如果需要，可以参考以下答案：trigger custom event without jQuery

Answer 3

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

IF (NEW.field1 <> OLD.field1) THEN
     IF (TG_OP = 'UPDATE') THEN

在您的app.component.ts文件中，获取元素ref并调度一个事件，并为其创建事件处理程序

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

在Angular 5 TypeScript中触发keyup事件

3 个答案: