Один и тот же ярлык привязан к нескольким кнопкам в нескольких модальных окнах

Приложение My Angular 5 показывает 3 модальных окна с кнопками.

Все они имеют одну и ту же кнопку: "Подтверждение". Эта кнопка ассоциируется с одним и тем же сочетанием клавиш "ALT+C" для активации во всех окнах.

Поток следующий:

  1. Я нажимаю "ALT+C" в окне № 1, чтобы активировать собственную кнопку "Подтверждение". После этого открывается окно № 2.
  2. Я повторяю тот же процесс в окне № 2: я нажимаю "ALT+C", чтобы активировать собственную кнопку "Подтверждение", чтобы показать окно № 3.
  3. Окно № 3 отображается с собственной кнопкой "Подтвердить".

Обратите внимание, что 3 окна являются модальными; Таким образом, они активны, хотя только окно № 3 является единственным видимым в данный момент. Поэтому все три окна прослушивают ключевые события. Если я нажму "ALT+C" (пока отображается окно № 3), кнопки "Подтверждение" в окне № 1 и окне № 2 прослушивают это событие и выполняют связанные с ними операторы.

Интересно, есть ли способ, чтобы окно № 3 было единственным окном, которое слушает событие "ALT+C", и чтобы это окно № 1 и окно № 2 не прослушивали это событие, пока окно № 3 видно.

Я повторяю этот код на всех окнах:

@HostListener('window:keydown', ['$event'])
  keyEvent(event: KeyboardEvent) {
    const charCode = String.fromCharCode(event.which).toUpperCase();
    if (event.altKey) {
      event.preventDefault(); event.stopPropagation();
      this.invocarAccion(charCode);
    }
  }

Метод invocarAccion вызывает различные конечные точки в соответствии с их окнами.

Все окна используют один и тот же общий компонент кнопки.

Мои вопросы:

  1. Возможно, мне следует изменить цель @HostListener (в данном случае "окно"), чтобы она была более конкретной?
  2. Как избежать, чтобы другие модальные окна слушали этот ярлык, и он только слушал определенное окно?

С наилучшими пожеланиями.

0 ответов

Другие вопросы по тегам