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

本文介绍了在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