在 Angular 中关闭 FullScreen 时不会调用转义函数 [英] Escape Function Doesn't Get Called When Close FullScreen in Angular

问题描述

当我尝试按下 esc 功能以关闭我的应用程序的全屏时遇到问题.全屏和关闭全屏已经有效.但问题是当我当前处于全屏模式并且我尝试单击 esc 时，它会关闭全屏但仍显示打开"一词.请在下面查看我的代码.请点击这里我的 stackblizk 链接 https://stackblitz.com/edit/fullscreen-closefullscreen?file=src%2Fapp%2Fapp.component.ts

I have a problem when i try to press the esc function so that the fullscreen of my app will close. The fullscreen and close fullscreen already works. But the problem is when i'm currently in fullscreen mode and i try to click the esc, it closes the fullscreen but the word "Open" is still being shown. Please see my codes below. Please click also my stackblizk link here 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>

推荐答案

不确定您是否可以解决此问题.我有一些和你一样的情况，我通过 @HostListener 修复，如下所示.

Not sure you can fix this issue. I have some case same with you and I fix by @HostListener like below.

@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

这篇关于在 Angular 中关闭 FullScreen 时不会调用转义函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！