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>

test.component.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';
    }

}

请帮助我解决问题。预先感谢

Answer 1

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

有关更多详细信息，请参见：Git和Morzila doc。

或为this.elem中的afterViewInit()赋值

第二次调用openFullscreen（）引发错误

1 个答案: