我正在开发一个应用程序,我想实现这样一个事情,如果用户离开一个组件,进入另一个组件,然后在其他组件的ngOnInit方法 chrome 浏览器应该去全屏一样,当我们按Fn + F11键。如有任何帮助或参考,不胜感激。
d7v8vwbk1#
操作方法-全屏-https://www.w3schools.com/howto/howto_js_fullscreen.asp这就是目前的“棱角方式”。
HTML格式
<h2 (click)="openFullscreen()">open</h2> <h2 (click)="closeFullscreen()">close</h2>
组件
import { DOCUMENT } from '@angular/common'; import { Component, Inject, OnInit } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { constructor(@Inject(DOCUMENT) private document: any) {} elem; ngOnInit() { this.elem = document.documentElement; } openFullscreen() { if (this.elem.requestFullscreen) { this.elem.requestFullscreen(); } else if (this.elem.mozRequestFullScreen) { /* Firefox */ this.elem.mozRequestFullScreen(); } else if (this.elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */ this.elem.webkitRequestFullscreen(); } else if (this.elem.msRequestFullscreen) { /* IE/Edge */ this.elem.msRequestFullscreen(); } } /* Close fullscreen */ closeFullscreen() { if (this.document.exitFullscreen) { this.document.exitFullscreen(); } else if (this.document.mozCancelFullScreen) { /* Firefox */ this.document.mozCancelFullScreen(); } else if (this.document.webkitExitFullscreen) { /* Chrome, Safari and Opera */ this.document.webkitExitFullscreen(); } else if (this.document.msExitFullscreen) { /* IE/Edge */ this.document.msExitFullscreen(); } } }
oaxa6hgo2#
您可以尝试使用requestFullscreen我已经在**Stackblitz**上创建了演示
requestFullscreen
fullScreen() { let elem = document.documentElement; let methodToBeInvoked = elem.requestFullscreen || elem.webkitRequestFullScreen || elem['mozRequestFullscreen'] || elem['msRequestFullscreen']; if (methodToBeInvoked) methodToBeInvoked.call(elem); }
c86crjj03#
上面的大多数答案都是从2018年开始的,现在要在Chrome,Firefox,其他浏览器和移动的上实现兼容性,我已经确定使用requestFullScreen就足够了https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen下面是一个能够在全屏和普通屏幕之间切换的示例:
requestFullScreen
docElement: HTMLElement; isFullScreen: boolean = false; ngOnInit(): void { this.docElement = document.documentElement; } toggleFullScreen() { if (!this.isFullScreen) { this.docElement.requestFullscreen(); } else { document.exitFullscreen(); } this.isFullScreen = !this.isFullScreen; }
只有当用户与某个元素(例如按钮)交互时,才能请求更改为全屏
<button (click)="toggleFullScreen()">SWITCH SCREEN MODE</button>
fbcarpbf4#
将以下代码放在要触发的组件的顶部(@Component之前):
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(); }
并在ngOnInit方法上调用setFullScreen(full: boolean)函数:
setFullScreen(full: boolean)
ngOnInit(): void { setFullScreen(true); }
cgyqldqp5#
这是当前的“Angular 方式”。
HTML:在Html中使用此:
(click)="openFullscreen()
NgOninit:
this.elem = document.documentElement;
TS:输入此函数,它将工作...
openFullscreen() { if (this.elem.requestFullscreen) { this.elem.requestFullscreen(); } else if (this.elem.mozRequestFullScreen) { /* Firefox */ this.elem.mozRequestFullScreen(); } else if (this.elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */ this.elem.webkitRequestFullscreen(); } else if (this.elem.msRequestFullscreen) { /* IE/Edge */ this.elem.msRequestFullscreen(); }`]`
}
5条答案
按热度按时间d7v8vwbk1#
操作方法-全屏-https://www.w3schools.com/howto/howto_js_fullscreen.asp
这就是目前的“棱角方式”。
HTML格式
组件
oaxa6hgo2#
您可以尝试使用
requestFullscreen
我已经在**Stackblitz**上创建了演示
c86crjj03#
上面的大多数答案都是从2018年开始的,现在要在Chrome,Firefox,其他浏览器和移动的上实现兼容性,我已经确定使用
requestFullScreen
就足够了https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen
下面是一个能够在全屏和普通屏幕之间切换的示例:
只有当用户与某个元素(例如按钮)交互时,才能请求更改为全屏
fbcarpbf4#
将以下代码放在要触发的组件的顶部(@Component之前):
并在ngOnInit方法上调用
setFullScreen(full: boolean)
函数:cgyqldqp5#
这是当前的“Angular 方式”。
HTML:在Html中使用此:
NgOninit:
TS:输入此函数,它将工作...
}