angular - openFullscreen() 第二次调用时抛出错误

Question

tt.component.html

 <a class="fancy-button"><span (click)="onselect()"><i size="2x"
            class="fa fa-ticket"></i>Start</span></a>  

tt.component.ts

 export class ttComponent implements OnInit {
  elem;
  ngOnInit() {
    this.elem = document.documentElement;
   })
     onselect() {
            this.router.navigate(['test']);
            this.openFullscreen();
          }    

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

上面的代码以全屏方式打开 test.html，但是当用户按下 ESC 按钮时，它会被最小化。所以我在测试屏幕中使用了另一个按钮来调用 openFullscreen()。但我收到一个错误

test.component.html

 <a class="fancy-button"><span (click)="openFullscreen()"><i size="2x" class="fa fa-ticket"></i>Fullscreen</span></a>  

测试组件.ts

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

    fullscreenmode(){

    if(this.toggleClass == 'ft-minimize'){
      this.toggleClass = 'ft-maximize';
      console.log("Switch to full screen")
      this.openFullscreen();
    }
    else{
      this.toggleClass = 'ft-minimize';
    }

}

请帮我解决它。提前致谢

标签： angular

Answer 1

该错误在您的代码中（与此插件无关），您正在尝试调用 head 标记内的函数，这些函数在加载整个文档之前被调用，因此您尝试使用的元素尚不存在。您需要在其他脚本所在的 body 标记底部调用它们，或者使用 Ready 函数（如 jquery 中的那个）或 window.onload，因为它们将在所有内容加载后运行代码。

请参阅：Git和Morzila 文档了解更多详细信息。

或将值分配给this.eleminafterViewInit()