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();
                }
              }
     }   

Над кодом открывает тест. html в полноэкранном режиме, но когда пользователь нажимает кнопку ES C, он сворачивается. Поэтому я использовал другую кнопку на тестовом экране для вызова 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 do c для получения более подробной информации.

Или присвойте значение this.elem в afterViewInit()