Angular 6+ HostListener на числовом входе боковой селектор стрелок? - PullRequest
Новая
       45

Angular 6+ HostListener на числовом входе боковой селектор стрелок?

0 голосов
/ 19 декабря 2018

Я столкнулся с проблемой, когда у меня есть директива, сидящая на типе ввода = число, с боковыми стрелками для выбора чисел вверх и вниз.

Я использую HostListener, но не могу найти способнацелиться на конкретное событие, когда пользователь нажимает на боковые стрелки.

До сих пор я пытался:

@ HostListener (change '): не работает вообще

@HostListener ('ngModelChange'): вызвать бесконечный цикл, когда пользователь использует клавиатуру после

@ HostListener ('click'): работает только один, но событие не содержит входное значение, так как оноявляется общим событием щелчка.

@ HostListener ('input'): работает только тогда, когда пользователи вводят число с помощью клавиатуры

Кто-нибудь знает официальный способ получения этого события? 

 @HostListener('input', ['$event'])
  onEvent(event) {
    this._propagateTouch();
    this._propagateChange(event.target.value);
    // console.log('input');
  }

  @HostListener('click', ['$event'])
  onChange(event) {
    this._propagateTouch();
    this._propagateChange(event);
    console.log('arrow change');
  }

  @HostListener('keydown', ['$event'])
  handleKeyboardEvent(event) {
    this._propagateTouch();
    this._propagateChange(event.target.value);
  }

1 Ответ

0 голосов
/ 19 декабря 2018

Angular выполняет предоставленный / настроенный метод для HostListener , когда элемент генерирует настроенное событие.Для input https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

доступны два события change и input. Для ввода, когда пользователь запускает событие стрелки вверх или вниз для события @HostListener("input", ["$event"]). Демо 

  @HostListener("input", ["$event"])
    public onInput(event: any): void {
        console.log("input:"+ event);
        alert(event);
    }

 @HostListener("input", ["$event.target"])
    public onInput(event: any): void {
        console.log("input:"+ event);
        alert(event);
    }
...