Question

当我尝试按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>

Answer 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

在Angular中关闭全屏显示时不会调用转义功能

1 个答案: