Функция Escape не вызывается при закрытии полноэкранного режима в Angular

У меня проблема, когда я пытаюсь нажать функцию esc, чтобы закрыть полноэкранный режим моего приложения. Полноэкранный режим и закрытие полноэкранного режима уже работают. Но проблема в том, что когда я сейчас в полноэкранном режиме и пытаюсь нажать клавишу esc, он закрывает полноэкранный режим, но слово «Открыть» все еще отображается. Пожалуйста, смотрите мои коды ниже. Нажмите также на мою ссылку stackblizk здесь https://stackblitz.com/edit/fullscreen-closefullscreen?file=src%2Fapp%2Fapp.component.ts

@HostListener('document:keydown.escape', ['$event']) onKeydownHandler(event: KeyboardEvent) {
    this.closeFullscreen();
  }


<ul class = "navbar-nav">
    <li class = "nav-item mr-2  d-none d-lg-block">
        <a *ngIf = "toggleClass === 'ft-maximize'" href = "javascript:;" class = "nav-link" (click) = "openFullscreen()">
            Open
        </a>
        <a *ngIf = "toggleClass === 'ft-minimize'" href = "javascript:;" class = "nav-link" (click) = "closeFullscreen()">
            Close
        </a>
    </li>
</ul>

какой браузер вы использовали? Я нажимаю esc, он показывает закрыть?

Hien Nguyen 08.04.2019 09:01

@HienNguyen. да, он закрывается при нажатии esc, НО слово «Открыть» все еще появляется. Должно быть "Закрыть"

Joseph 08.04.2019 09:02

Я пробовал в вашем stackbliz, он показывает закрытый текст

Hien Nguyen 08.04.2019 09:05

Да, он показывает текст «Закрыть», когда вы нажимаете слово «Открыть», НО когда вы нажимаете «esc», появляется слово «Закрыть», а не «Открыть».

Joseph 08.04.2019 09:08
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
4
374
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Не уверен, что вы сможете решить эту проблему. У меня есть такой же случай, как и у вас, и я исправляю @HostListener, как показано ниже.

@HostListener('document:fullscreenchange', ['$event'])
@HostListener('document:webkitfullscreenchange', ['$event'])
@HostListener('document:mozfullscreenchange', ['$event'])
@HostListener('document:MSFullscreenChange', ['$event'])
fullscreenmode(){

    if (this.toggleClass == 'ft-minimize'){
      this.toggleClass = 'ft-maximize';
    }
    else{
      this.toggleClass = 'ft-minimize';
    }
    console.info(this.toggleClass)
 }

Демо: https://stackblitz.com/edit/fullscreen-closefullscreen-qbickg?file=src/app/app.component.ts

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