Триггерное событие в Angular 5 TypeScript

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

Если вы хотите прослушать событие Angular в HTML, вы можете сделать это следующим образом:

<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 vs typcript.Машинопись в основном такая же.Различие скорее JQuery против угловых.

Пометьте свою кнопку идентификатором, чтобы мы могли получить к ней доступ из компонента.

<button #submitButton ...>

В вашем компоненте вы можете использовать декоратор ViewChild для доступа к этому элементу.

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

    emitClick() {
         // ...
    }
}

Затем, чтобы вызвать щелчок, вы можете сделать следующее:

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

Просто убедитесь, что вы не вызываете emitClick на ранней стадии.ViewRef доступен только после события углового жизненного цикла AfterViewInit, если я не ошибаюсь.

Это также должно работать для фокуса.Другие события могут быть немного сложнее, но у вас есть нативный элемент dom, поэтому в основном вам просто нужно выяснить, как вызвать желаемое событие на нативном элементе dom без jquery.Если вам нужно, вы можете обратиться к этому ответу: вызвать пользовательское событие без jQuery

Answer 3

В вашем файле 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)
 }

}