Angular 7-HTML5全屏API是如何工作的？I'；我犯了很多错误

我使用Angular 7，我希望有一个按钮可以将我的应用程序全屏显示。我使用HTML5全屏API，并实现了两个功能：

openfullscreen（）{
//全屏触发
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和Opera*/
document.documentElement.webkitRequestFullscreen（）；
}else if（document.documentElement.msRequestFullscreen）{/*IE/Edge*/
document.documentElement.msRequestFullscreen（）；
}
this.isfullscreen=true；
}
关闭全屏（）{
if（document.exitFullscreen）{
document.exitFullscreen（）；
}else if（document.mozCancelFullScreen）{/*Firefox*/
document.mozCancelFullScreen（）；
}如果（document.webkitExitFullscreen）{/*Chrome、Safari和Opera*/
document.webkitExitFullscreen（）；
}else if（document.msExitFullscreen）{/*IE/Edge*/
document.msExitFullscreen（）；
}
this.isfullscreen=false；
}

您可以通过使用

as

关键字来转换

文档

和

文档.文档元素

的界面，告诉typescript您将要使用的方法

像这样：

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

const docElmWithBrowsersFullScreenFunctions=document.documentElement作为HTMLElement&{
mozRequestFullScreen（）：承诺；
webkitRequestFullscreen（）：承诺；
msRequestFullscreen（）：承诺；
};
const docWithBrowsersExitFunctions=文档作为文档&{
mozCancelFullScreen（）：承诺；
webkitExitFullscreen（）：承诺；
msExitFullscreen（）：承诺；
};

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

因此，您的方法如下所示：

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

openfullscreen（）{
//全屏触发
const docelmWithBrowsersFullScreensFunctions=document.documentElement作为HTMLElement&{
mozRequestFullScreen（）：承诺；
webkitRequestFullscreen（）：承诺；
msRequestFullscreen（）：承诺；
};
if（docElmWithBrowsersFullScreenFunctions.requestFullscreen）{
docElmWithBrowsersFullScreenFunctions.requestFullscreen（）；
}else if（docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen）{/*Firefox*/
docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen（）；
}else if（docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen）{/*Chrome、Safari和Opera*/
docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen（）；
}else if（docElmWithBrowsersFullScreenFunctions.msRequestFullscreen）{/*IE/Edge*/
docElmWithBrowsersFullScreenFunctions.msRequestFullscreen（）；
}
this.isfullscreen=true；
}
关闭全屏（）{
const docWithBrowsersExitFunctions=文档作为文档&{
mozCancelFullScreen（）：承诺；
webkitExitFullscreen（）：承诺；
msExitFullscreen（）：承诺；
};
如果（docWithBrowsersExitFunctions.exitFullscreen）{
docWithBrowsersExitFunctions.exitFullscreen（）；
}else if（docWithBrowserSextFunctions.mozCancelFullScreen）{/*Firefox*/
docWithBrowsersExitFunctions.mozCancelFullScreen（）；
}else if（docWithBrowserSextFunctions.webkitExitFullscreen）{/*Chrome、Safari和Opera*/
docWithBrowsersExitFunctions.webkitExitFullscreen（）；
}else if（docWithBrowserSextFunctions.msExitFullscreen）{/*IE/Edge*/
docWithBrowsersExitFunctions.msExitFullscreen（）；
}
this.isfullscreen=false；
}

angular文档类型不提供这些方法或属性。您要么需要编写一个提供它们的类型扩展，要么可能只是使用一个像screenfull.js这样的库来为您处理所有这些垃圾。不要重新发明轮子。谢谢，但这可以与HTML5 API一起工作，问题是Angular cli出现错误，这可以工作，但Angular cli停止编译。可能重复我说过的内容。问题是打字。被接受的答案和我说的一模一样，它扩展了打字。对不起，我不明白你说的是screenfull.js。抱歉。@JérémyChamboultou我更新了我的答案。我没有测试，所以请让我知道这是否有效