Angular 7 - Как работает полноэкранный API HTML5? У меня много ошибок - PullRequest
Новая
       8

Angular 7 - Как работает полноэкранный API HTML5? У меня много ошибок

0 голосов
/ 17 января 2019

Я использую Angular 7, и мне нужна кнопка для вывода моего приложения в полноэкранный режим.Я использую полноэкранный API-интерфейс HTML5 и выполняю две функции: 

openfullscreen() {
    // Trigger fullscreen
    console.log('gg');
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) { /* Firefox */
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
      document.documentElement.webkitRequestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) { /* IE/Edge */
      document.documentElement.msRequestFullscreen();
    }
    this.isfullscreen = true;
  }

  closefullscreen(){
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) { /* Firefox */
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { /* IE/Edge */
      document.msExitFullscreen();
    }
    this.isfullscreen = false;
  }

Это сработало в начале, но у меня было много ошибок:

Ошибка TS2339: Свойство 'mozRequestFullScreen' не существует для типа 'HTMLElement '.

ошибка TS2339: свойство' mozRequestFullScreen 'не существует для типа' HTMLElement '.

ошибка TS2339: свойство' webkitRequestFullscreen 'не существует для типа' HTMLElement '.

ошибка TS2339: свойство 'webkitRequestFullscreen' не существует для типа 'HTMLElement'.

ошибка TS2551: свойство 'msRequestFullscreen' не существует для типа 'HTMLElement'.Возможно, вы имели в виду «requestFullscreen»?

ошибка TS2551: свойство «msRequestFullscreen» не существует для типа «HTMLElement».Возможно, вы имели в виду «requestFullscreen»?

Ошибка TS2339: свойство «mozCancelFullScreen» не существует для типа «Документ».

Ошибка TS2339: Свойство «mozCancelFullScreen» не существует для типа «Документ».

ошибка TS2339: свойство 'webkitExitFullscreen' не существует в типе 'Document'.

ошибка TS2339: свойство 'webkitExitFullscreen' не существует в типе 'Document'.

ошибка TS2551: Свойство msExitFullscreen не существует для типа «Документ».Возможно, вы имели в виду «exitFullscreen»?

Ошибка TS2551: Свойство «msExitFullscreen» не существует для типа «Документ».Вы имели в виду 'exitFullscreen'?

Когда я перезагружаю свой код, у меня появляются те же ошибки, но, кроме того, у меня это так: 

Failed to compile.

И мое приложение нене работаетКак я могу скомпилировать без ошибок?

1 Ответ

0 голосов
/ 17 января 2019

Вы можете рассказать машинописи о методах, которые собираетесь использовать, используя ключевое слово as для приведения интерфейса document и document.documentElement.

Например: 

const docElmWithBrowsersFullScreenFunctions = document.documentElement as HTMLElement & {
  mozRequestFullScreen(): Promise<void>;
  webkitRequestFullscreen(): Promise<void>;
  msRequestFullscreen(): Promise<void>;
};

const docWithBrowsersExitFunctions = document as Document & {
  mozCancelFullScreen(): Promise<void>;
  webkitExitFullscreen(): Promise<void>;
  msExitFullscreen(): Promise<void>;
};

Обратите внимание, что это просто предотвращает ошибку компиляции, и вы все равно должны проверить, существуют ли методы, как вы.

Итак, ваши методы будут такими: 

openfullscreen() {
  // Trigger fullscreen
  const docElmWithBrowsersFullScreenFunctions = document.documentElement as HTMLElement & {
    mozRequestFullScreen(): Promise<void>;
    webkitRequestFullscreen(): Promise<void>;
    msRequestFullscreen(): Promise<void>;
  };

  if (docElmWithBrowsersFullScreenFunctions.requestFullscreen) {
    docElmWithBrowsersFullScreenFunctions.requestFullscreen();
  } else if (docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen) { /* Firefox */
    docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen();
  } else if (docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen();
  } else if (docElmWithBrowsersFullScreenFunctions.msRequestFullscreen) { /* IE/Edge */
    docElmWithBrowsersFullScreenFunctions.msRequestFullscreen();
  }
  this.isfullscreen = true;
}

closefullscreen(){
  const docWithBrowsersExitFunctions = document as Document & {
    mozCancelFullScreen(): Promise<void>;
    webkitExitFullscreen(): Promise<void>;
    msExitFullscreen(): Promise<void>;
  };
  if (docWithBrowsersExitFunctions.exitFullscreen) {
    docWithBrowsersExitFunctions.exitFullscreen();
  } else if (docWithBrowsersExitFunctions.mozCancelFullScreen) { /* Firefox */
    docWithBrowsersExitFunctions.mozCancelFullScreen();
  } else if (docWithBrowsersExitFunctions.webkitExitFullscreen) { /* Chrome, Safari and Opera */
    docWithBrowsersExitFunctions.webkitExitFullscreen();
  } else if (docWithBrowsersExitFunctions.msExitFullscreen) { /* IE/Edge */
    docWithBrowsersExitFunctions.msExitFullscreen();
  }
  this.isfullscreen = false;
}
...