Angular 7-HTML5全屏API如何工作?我有很多错误 [英] Angular 7 - How does work the HTML5 Fullscreen API ? I've a lot of errors

问题描述

我使用Angular 7，我希望有一个按钮可以将我的应用全屏显示.我使用HTML5全屏API，并且具有2个功能:

I use Angular 7 and I would like have a button for put my app in fullscreen. I use the HTML5 Fullscreen API and I've make 2 functions :

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

它在一开始就起作用，但是我有很多错误:

It worked in the beginning but I had a lot of error :

错误TS2339:类型上不存在属性'mozRequestFullScreen' "HTMLElement".

error TS2339: Property 'mozRequestFullScreen' does not exist on type 'HTMLElement'.

错误TS2339:类型上不存在属性'mozRequestFullScreen' "HTMLElement".

error TS2339: Property 'mozRequestFullScreen' does not exist on type 'HTMLElement'.

错误TS2339:属性"webkitRequestFullscreen"在以下位置不存在 输入"HTMLElement".

error TS2339: Property 'webkitRequestFullscreen' does not exist on type 'HTMLElement'.

错误TS2339:属性"webkitRequestFullscreen"在以下位置不存在 输入"HTMLElement".

error TS2339: Property 'webkitRequestFullscreen' does not exist on type 'HTMLElement'.

错误TS2551:类型上不存在属性'msRequestFullscreen' "HTMLElement".您是说'requestFullscreen'吗?

error TS2551: Property 'msRequestFullscreen' does not exist on type 'HTMLElement'. Did you mean 'requestFullscreen'?

错误TS2551:类型上不存在属性'msRequestFullscreen' "HTMLElement".您是说'requestFullscreen'吗?

error TS2551: Property 'msRequestFullscreen' does not exist on type 'HTMLElement'. Did you mean 'requestFullscreen'?

错误TS2339:类型上不存在属性'mozCancelFullScreen' 文档".

error TS2339: Property 'mozCancelFullScreen' does not exist on type 'Document'.

错误TS2339:类型上不存在属性'mozCancelFullScreen' 文档".

error TS2339: Property 'mozCancelFullScreen' does not exist on type 'Document'.

错误TS2339:类型上不存在属性'webkitExitFullscreen' 文档".

error TS2339: Property 'webkitExitFullscreen' does not exist on type 'Document'.

错误TS2339:类型上不存在属性'webkitExitFullscreen' 文档".

error TS2339: Property 'webkitExitFullscreen' does not exist on type 'Document'.

错误TS2551:类型上不存在属性'msExitFullscreen' '文档'.您是说"exitFullscreen"吗?

error TS2551: Property 'msExitFullscreen' does not exist on type 'Document'. Did you mean 'exitFullscreen'?

错误TS2551:类型上不存在属性'msExitFullscreen' '文档'.您是说"exitFullscreen"吗?

error TS2551: Property 'msExitFullscreen' does not exist on type 'Document'. Did you mean 'exitFullscreen'?

当我重新启动代码时，我遇到了相同的错误，但是除此之外:

When I restart my code I've the same errors but, in addition, I've that :

Failed to compile.

我的应用无法正常工作.我怎样才能毫无错误地进行编译?

And my app don't work. How I can compile without errors?

推荐答案

通过使用as关键字强制转换document和document.documentElement的接口，您可以告诉打字稿要使用的方法.

You can tell typescript about the methods that you're going to use by using the as keyword to cast the interface of document and 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>;
};

请注意，这只是防止编译错误，您仍然应该像以前一样检查这些方法是否存在.

Please note that this just prevents compile error and you still should check if the methods exist like you did.

所以您的方法将如下所示:

So your methods will be like this:

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

这篇关于Angular 7-HTML5全屏API如何工作?我有很多错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！