Angular 角度2/4上的全屏请求
我正在Angular 2/Angular 4上构建一个新项目，我需要在我的应用程序上使用Enter全屏按钮 我正在搜索，找到了代码：Angular 角度2/4上的全屏请求,angular,typescript,Angular,Typescript,我正在Angular 2/Angular 4上构建一个新项目，我需要在我的应用程序上使用Enter全屏按钮 我正在搜索，找到了代码： toggleFullScreen() { if (!document.fullscreenElement && // alternative standard method !document.mozFullScreenElement && !document.webkitFullscreenEle
toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement )
{ // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
有人能帮我吗？因为这些属性是mozFullScreenElement，msFullscreenElement。。。是基于供应商的，没有为其定义类型。解决这个问题的一个快速方法是将所有这些属性更改为类似于
document['mozzullScreenElement']mozzullScreenElement允许键盘输入的属性，因此，即使生成的JavaScript代码可以正常工作，TypeScript编译器也不高兴
快速而肮脏的解决方法是将所有给你带来麻烦的东西都扔给
。更复杂的方法是定义自己的接口，扩展HtmleElement和元素，如下所示：
interface MyHTMLElement extends HTMLElement {
mozFullScreenElement?: boolean;
webkitFullscreenElement?: boolean;
// ...etc...
}
…并像那样将元素对象强制转换为
编辑：我想自己使用这个全屏代码，所以我设计了一个全打字脚本友好的版本：
interface FsDocument extends HTMLDocument {
mozFullScreenElement?: Element;
msFullscreenElement?: Element;
msExitFullscreen?: () => void;
mozCancelFullScreen?: () => void;
}
export function isFullScreen(): boolean {
const fsDoc = <FsDocument> document;
return !!(fsDoc.fullscreenElement || fsDoc.mozFullScreenElement || fsDoc.webkitFullscreenElement || fsDoc.msFullscreenElement);
}
interface FsDocumentElement extends HTMLElement {
msRequestFullscreen?: () => void;
mozRequestFullScreen?: () => void;
}
export function toggleFullScreen(): void {
const fsDoc = <FsDocument> document;
if (!isFullScreen()) {
const fsDocElem = <FsDocumentElement> document.documentElement;
if (fsDocElem.requestFullscreen)
fsDocElem.requestFullscreen();
else if (fsDocElem.msRequestFullscreen)
fsDocElem.msRequestFullscreen();
else if (fsDocElem.mozRequestFullScreen)
fsDocElem.mozRequestFullScreen();
else if (fsDocElem.webkitRequestFullscreen)
fsDocElem.webkitRequestFullscreen();
}
else if (fsDoc.exitFullscreen)
fsDoc.exitFullscreen();
else if (fsDoc.msExitFullscreen)
fsDoc.msExitFullscreen();
else if (fsDoc.mozCancelFullScreen)
fsDoc.mozCancelFullScreen();
else if (fsDoc.webkitExitFullscreen)
fsDoc.webkitExitFullscreen();
}
export function setFullScreen(full: boolean): void {
if (full !== isFullScreen())
toggleFullScreen();
}
接口FsDocument扩展了HTMLDocument{
mozFullScreenElement？：元素；
msFullscreenElement？：元素；
MSEXIT全屏？：（）=>无效；
MozCancel全屏？：（）=>无效；
}
导出函数isFullScreen（）：布尔值{
const fsDoc=文件；
return！！（fsDoc.fullscreenElement | | fsDoc.mozFullScreenElement | | | fsDoc.webkitFullscreenElement | | fsDoc.msFullscreenElement）；
}
接口FsDocumentElement扩展HtmleElement{
msRequestFullscreen？：（）=>无效；
mozRequestFullScreen？：（）=>无效；
}
导出函数toggleFullScreen（）：void{
const fsDoc=文件；
如果（！isFullScreen（））{
const fsDocElem=document.documentElement；
如果（fsDocElem.requestFullscreen）
fsDocElem.requestFullscreen（）；
else if（fsDocElem.msRequestFullscreen）
fsDocElem.msRequestFullscreen（）；
else if（fsDocElem.mozRequestFullScreen）
fsDocElem.mozRequestFullScreen（）；
else if（fsDocElem.webkitRequestFullscreen）
fsDocElem.webkitRequestFullscreen（）；
}
else if（fsDoc.exitFullscreen）
fsDoc.exitFullscreen（）；
else if（fsDoc.msexit全屏）
fsDoc.msExitFullscreen（）；
else if（fsDoc.mozCancel全屏）
fsDoc.mozCancelFullScreen（）；
else if（fsDoc.webkitExitFullscreen）
fsDoc.webkitExitFullscreen（）；
}
导出函数setFullScreen（完整：布尔值）：无效{
if（full！==isFullScreen（））
切换全屏（）；
}
到目前为止，我已经在Chrome、Firefox和Safari上运行了这个程序，都在macOS上运行，效果非常好。由@kshetline提供的解决方案效果非常好！ 所以我决定把它投入服务
从'@angular/core'导入{Injectable}；
@可注射（）
导出类全屏服务{
私人文件=文件；
输入（）{
const el=this.doc.documentElement；
if（el.requestFullscreen）el.requestFullscreen（）；
else if（el.msRequestFullscreen）el.msRequestFullscreen（）；
else if（el.mozRequestFullScreen）el.mozRequestFullScreen（）；
否则我
interface FsDocument extends HTMLDocument {
mozFullScreenElement?: Element;
msFullscreenElement?: Element;
msExitFullscreen?: () => void;
mozCancelFullScreen?: () => void;
}
export function isFullScreen(): boolean {
const fsDoc = <FsDocument> document;
return !!(fsDoc.fullscreenElement || fsDoc.mozFullScreenElement || fsDoc.webkitFullscreenElement || fsDoc.msFullscreenElement);
}
interface FsDocumentElement extends HTMLElement {
msRequestFullscreen?: () => void;
mozRequestFullScreen?: () => void;
}
export function toggleFullScreen(): void {
const fsDoc = <FsDocument> document;
if (!isFullScreen()) {
const fsDocElem = <FsDocumentElement> document.documentElement;
if (fsDocElem.requestFullscreen)
fsDocElem.requestFullscreen();
else if (fsDocElem.msRequestFullscreen)
fsDocElem.msRequestFullscreen();
else if (fsDocElem.mozRequestFullScreen)
fsDocElem.mozRequestFullScreen();
else if (fsDocElem.webkitRequestFullscreen)
fsDocElem.webkitRequestFullscreen();
}
else if (fsDoc.exitFullscreen)
fsDoc.exitFullscreen();
else if (fsDoc.msExitFullscreen)
fsDoc.msExitFullscreen();
else if (fsDoc.mozCancelFullScreen)
fsDoc.mozCancelFullScreen();
else if (fsDoc.webkitExitFullscreen)
fsDoc.webkitExitFullscreen();
}
export function setFullScreen(full: boolean): void {
if (full !== isFullScreen())
toggleFullScreen();
}