Angular 7 - HTML5 Fullscreen 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"'HTML元素'.
error TS2339: Property 'mozRequestFullScreen' does not exist on type 'HTMLElement'.
错误 TS2339:类型上不存在属性mozRequestFullScreen"'HTML元素'.
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"'HTML元素'.您的意思是requestFullscreen"吗?
error TS2551: Property 'msRequestFullscreen' does not exist on type 'HTMLElement'. Did you mean 'requestFullscreen'?
错误 TS2551:类型上不存在属性msRequestFullscreen"'HTML元素'.您的意思是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 Fullscreen API 如何工作?我有很多错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!