Как называть ключевые события внутренне в Angular - PullRequest
Новая
       24

Как называть ключевые события внутренне в Angular

0 голосов
/ 24 мая 2019

При нажатии клавиши Enter, я хочу выполнить следующие внутренние операции:

  1. Ввести «Пробел»
  2. Ввести «Клавишу возврата» 
editor.on('keydown', function (e) {
          if (e.keyCode === 13) {
            // I want to coding this part.
            // 1. keypress keyCode(32) == Space
            // 2. keypress keyCode(8) == Backspace
          }
        });

Причина этого в том, что редактор не совместим с клавиатурой IME.Поэтому мне интересно, как вводить ключи внутри.

1 Ответ

0 голосов
/ 24 мая 2019

Как насчет использования Host Listener?

Для прослушивания окна событий мы будем использовать HostListener API. Этот API позволяет нам регистрировать конкретного прослушивателя событий в браузере, а затем вызывать методы в наших компонентах, чтобы реагировать на них.

Вот пример кода:

Html: 

<button (click)="decrement()">-</button>
{{value}}
<button (click)="increment()">+</button>

Ts: 

import { Component, HostListener } from '@angular/core';

export enum KEY_CODE {
  RIGHT_ARROW = 39,
  LEFT_ARROW = 37
}

@Component({
  selector: 'demo-app',
  templateUrl: 'app/app.component.html'
})
export class AppComponent {
  value = 0;
  constructor() { }

  @HostListener('window:keyup', ['$event'])
  keyEvent(event: KeyboardEvent) {
    console.log(event);

    if (event.keyCode === KEY_CODE.RIGHT_ARROW) {
      this.increment();
    }

    if (event.keyCode === KEY_CODE.LEFT_ARROW) {
      this.decrement();
    }
  }

  increment() {
    this.value++;
  }

  decrement() {
    this.value--;
  }
}

Проверьте это blogpost для более подробной информации.

...