Блог

Главная - Вопросы по программированию - Функция escape не вызывается при закрытии полноэкранного режима в Angular

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

#angular #angular6

#angular #angular6

Вопрос:

У меня проблема, когда я пытаюсь нажать функцию esc, чтобы закрыть полноэкранный режим моего приложения. Полноэкранный режим и закрытие полноэкранного режима уже работают. Но проблема в том, что когда я нахожусь в полноэкранном режиме и пытаюсь нажать esc, он закрывает полноэкранный режим, но слово «Открыть» все еще отображается. Пожалуйста, смотрите мои коды ниже. Пожалуйста, нажмите также на мою ссылку stackblizk здесь https://stackblitz.com/edit/fullscreen-closefullscreen?file=src/app/app.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>

Комментарии:

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

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

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

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

Ответ №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.log(this.toggleClass)
 }

Демонстрация: https://stackblitz.com/edit/fullscreen-closefullscreen-qbickg?file=src/app/app.component.ts