[英]Escape Function Doesn't Get Called When Close FullScreen in Angular
I have a problem when i try to press the esc function so that the fullscreen of my app will close. 当我尝试按下esc功能以便我的应用程序的全屏关闭时,我遇到了问题。 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.
但问题是,当我目前处于全屏模式并且我尝试点击esc时,它会关闭全屏,但仍会显示“打开”字样。 Please see my codes below.
请参阅下面的代码。 Please click also my stackblizk link here https://stackblitz.com/edit/fullscreen-closefullscreen?file=src%2Fapp%2Fapp.component.ts
请点击这里我的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>
Not sure you can fix this issue. 不确定您是否可以解决此问题。 I have some case same with you and I fix by
@HostListener
like below. 我有一些与你相同的情况,我通过
@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)
}
Demo: https://stackblitz.com/edit/fullscreen-closefullscreen-qbickg?file=src/app/app.component.ts 演示: https : //stackblitz.com/edit/fullscreen-closefullscreen-qbickg?file = src / app / app.component.ts
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.