Angular Material-某些脚本停止以全屏模式运行

如何解决Angular Material-某些脚本停止以全屏模式运行

我在Angular 8中创建了一个Web应用程序。在我的页面上，我有一个“ viewArea”，它的容器很长（水平很长），还有许多带有脚本的按钮可以与此容器一起使用，包括水平滚动它。一切正常，但不能在全屏模式下进行。某些脚本无法在全屏模式下运行。当我退出全屏显示时，我看到它们正在运行...我注意到所有这些脚本都称为“ mat-dialog”窗口。确切地说，它是这样工作的：通过按一个按钮，在输入脚本运行后，弹出窗口（角度材质对话框）出现一个问题。但是在全屏模式下，我按下按钮，没有弹出窗口出现，退出全屏，然后在屏幕上看到该弹出窗口。有人有同样的问题吗？有什么问题吗？

my scripts to enter the full screen mode:

openFullscreen(elem) {
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) { /* Firefox */
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) { /* Chrome,Safari and Opera */
      elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { /* IE/Edge */
      elem.msRequestFullscreen();
    }
  }

  closeFullscreen(elem) {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (elem.mozCancelFullScreen) { /* Firefox */
      elem.mozCancelFullScreen();
    } else if (elem.webkitExitFullscreen) { /* Chrome,Safari and Opera */
      elem.webkitExitFullscreen();
    } else if (elem.msExitFullscreen) { /* IE/Edge */
      elem.msExitFullscreen();
    }
  }

  
fullScreen(){
  this.myService.fullScreenStatus = true;
  let elem = document.getElementById('viewArea');
  this.openFullscreen(elem);    
  elem.classList.add('noScrollBars');
  elem.style.zoom = "85%" ;   
}

exitFullScreen() {
  this.myService.fullScreenStatus = false;
  let elem = document.getElementById('viewArea');
  this.closeFullscreen(elem);
  elem.classList.add('noScrollBars');
  elem.style.zoom = "100%" ; 
}


buttons to open and close full screen:

<button class='btn btn-light half-button'
[hidden]="myService.editStatus === false || myService.fullScreenStatus === true || myService.hideMenuStatus === true"
(click)="indexeDbService.fullScreen()">full screen</button>

<button class='btn btn-light half-button' style='background-color: whitesmoke;'
[hidden]="myService.editStatus === false || myService.fullScreenStatus === false || myService.hideMenuStatus === true"
(click)="indexeDbService.exitFullScreen()">full screen</button>

button to call a mat-dialog window:

<button class='btn btn-light half-button'
[hidden]="myService.editStatus === false || myService.hideMenuStatus === true"  
[disabled]="myService.tonalityOriginalStatus === false || myService.protectedStatus === true || myService.readStatus === true"  
(click)="openDialognuance()">add nuance</button> 

script on this button:

  openDialognuance() {
    this.dialog.open(nuanceComponent,{
      panelClass: 'mat-dialog',// height: '400px',// width: '1200px',})
    .afterClosed()
    .subscribe( result  => {
      this.indexeDbService.nuanceAdd(result);
    })
  };

script to run after input in mat-dialog:

async nuanceAdd(nuance){
  if (!nuance) {
    return
  }
  let activeElementId = this.activeElementId(this.activeElement());
  this.actRegistration.push({'id': activeElementId,'undoType': 'nuance'});
  this.nuanceToRegister(activeElementId,`${nuance}`);
  this.deleteallPrevIoUslyAddedDivs();
  let div = document.createElement('div');
  div.id = `${activeElementId}-${nuance}`;
  div.className = `nuanceText`;
  if (nuance === 'pedal on') div.textContent = this.pedalOn;
  if (nuance === 'pedal off') div.textContent = this.pedalOff;
  if (nuance === 'flageolet') div.textContent = this.flageolet;
  if (nuance === 'slapping') div.textContent = this.slapping;
  if (nuance === 'vibrato') div.textContent = this.vibrato;
  if (nuance === 'spiccato') div.textContent = this.spiccato;
  if (nuance === 'pizzicato') div.textContent = this.pizzicato;
  if (nuance === 'ricochet') div.textContent = this.ricochet;
  if (nuance === 'portamento') div.textContent = this.portamento;
  document.getElementById(activeElementId).appendChild(div);
  let datas = await this.getFromIndexeDb();
  for (let ms = 0; ms < datas.length; ms++) {
    for (let bt = 0; bt < datas[ms].length; bt++){
      for (let oct = 0; oct < datas[ms][bt].length; oct++) {
        for (let st = 0; st < datas[ms][bt][oct].length; st++){
          if (datas[ms][bt][oct][st].id === this.firstFourInId(activeElementId)){
              datas[ms][bt][oct][st].nuance = nuance;
              datas[ms][bt][oct][st].articulationTime = null;
              datas[ms][bt][oct][st].ornament = null;
              datas[ms][bt][oct][st].applicature = null;
            }}}}}
  this.putToIndexeDb(datas)
}

解决方法

在研究互联网两个星期后，我发现了这个

IE cannot scroll while in fullscreen mode

还有这个

https://www.tenforums.com/general-support/155126-asus-q525ua-notebook-can-not-full-screen-using-f11-key-so-how-then.html

解决了我的问题！