在Angular中關閉FullScreen時不會調用轉義函數

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