Angular 2/4 上的全屏请求

Question

我正在 Angular 2/Angular 4 上构建一个新项目，我需要在我的应用程序上使用 Enter FullScreen Button。

我正在搜索，我找到了代码：

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

当我使用“ng serve”编译应用程序时，全屏按钮可以工作，但它给了我以下错误：

 src/app/commom/breadcrumb/breadcrumb.component.ts(41,64) 中的错误：错误 TS2339：“HTMLElement”类型上不存在属性“mozRequestFullScreen”。
src/app/commom/breadcrumb/breadcrumb.component.ts(41,127)：错误 TS2551：“HTMLElement”类型上不存在属性“msRequestFullscreen”。您的意思是“请求全屏”吗？
src/app/commom/breadcrumb/breadcrumb.component.ts(42,56)：错误 TS2339：“文档”类型上不存在属性“mozCancelFullScreen”。
src/app/commom/breadcrumb/breadcrumb.component.ts(42,111)：错误 TS2551：“文档”类型上不存在属性“msExitFullscreen”。您的意思是“退出全屏”吗？
src/app/commom/breadcrumb/breadcrumb.component.ts(44,41)：错误 TS2339：“文档”类型上不存在属性“mozFullScreenElement”。
src/app/commom/breadcrumb/breadcrumb.component.ts(44,102)：错误 TS2551：“文档”类型上不存在属性“msFullscreenElement”。您的意思是“全屏元素”吗？
src/app/commom/breadcrumb/breadcrumb.component.ts(103,19)：错误 TS2339：“文档”类型上不存在属性“mozFullScreenElement”。
src/app/commom/breadcrumb/breadcrumb.component.ts(103,90)：错误 TS2551：“文档”类型上不存在属性“msFullscreenElement”。您的意思是“全屏元素”吗？
src/app/commom/breadcrumb/breadcrumb.component.ts(107,43)：错误 TS2551：“HTMLElement”类型上不存在属性“msRequestFullscreen”。您的意思是“请求全屏”吗？
src/app/commom/breadcrumb/breadcrumb.component.ts(108,34)：错误 TS2551：“HTMLElement”类型上不存在属性“msRequestFullscreen”。您的意思是“请求全屏”吗？
src/app/commom/breadcrumb/breadcrumb.component.ts(109,43)：错误 TS2339：“HTMLElement”类型上不存在“mozRequestFullScreen”属性。
src/app/commom/breadcrumb/breadcrumb.component.ts(110,34)：错误 TS2339：“HTMLElement”类型上不存在“mozRequestFullScreen”属性。
src/app/commom/breadcrumb/breadcrumb.component.ts(112,9)：错误 TS2554：预期 0 个参数，但得到 1 个。
src/app/commom/breadcrumb/breadcrumb.component.ts(112,66): 错误 TS2339: 属性 'ALLOW_KEYBOARD_INPUT' 不存在于类型'{ new (): Element;原型：元素； }'。
src/app/commom/breadcrumb/breadcrumb.component.ts(117,27)：错误 TS2551：“文档”类型上不存在属性“msExitFullscreen”。您的意思是“退出全屏”吗？
src/app/commom/breadcrumb/breadcrumb.component.ts(118,18)：错误 TS2551：“文档”类型上不存在属性“msExitFullscreen”。您的意思是“退出全屏”吗？
src/app/commom/breadcrumb/breadcrumb.component.ts(119,27)：错误 TS2339：“文档”类型上不存在属性“mozCancelFullScreen”。
src/app/commom/breadcrumb/breadcrumb.component.ts(120,18)：错误 TS2339：“文档”类型上不存在属性“mozCancelFullScreen”。

有人可以帮帮我吗？

Answer 1

@kshetline 的解决方案效果非常好！ 所以我决定把它放到一个服务中

import {Injectable} from '@angular/core';

@Injectable()
export class FullscreenService {
  private doc = <FullScreenDocument>document;

  enter() {
    const el = this.doc.documentElement;
    if (el.requestFullscreen) el.requestFullscreen();
    else if (el.msRequestFullscreen) el.msRequestFullscreen();
    else if (el.mozRequestFullScreen) el.mozRequestFullScreen();
    else if (el.webkitRequestFullscreen) el.webkitRequestFullscreen();
  }

  leave() {
    if (this.doc.exitFullscreen) this.doc.exitFullscreen();
    else if (this.doc.msExitFullscreen) this.doc.msExitFullscreen();
    else if (this.doc.mozCancelFullScreen) this.doc.mozCancelFullScreen();
    else if (this.doc.webkitExitFullscreen) this.doc.webkitExitFullscreen();
  }

  toggle() {
    if (this.enabled) this.leave();
    else this.enter();
  }

  get enabled() {
    return !!(
      this.doc.fullscreenElement ||
      this.doc.mozFullScreenElement ||
      this.doc.webkitFullscreenElement ||
      this.doc.msFullscreenElement
    );
  }
}

interface FullScreenDocument extends HTMLDocument {
  documentElement: FullScreenDocumentElement;
  mozFullScreenElement?: Element;
  msFullscreenElement?: Element;
  webkitFullscreenElement?: Element;
  msExitFullscreen?: () => void;
  mozCancelFullScreen?: () => void;
  webkitExitFullscreen?: () => void;
}

interface FullScreenDocumentElement extends HTMLElement {
  msRequestFullscreen?: () => void;
  mozRequestFullScreen?: () => void;
  webkitRequestFullscreen?: () => void;
}

用法

@Component()
export class SomeComponent {
  constructor(private fullscreenService: FullscreenService) {}

  onToggleFullscreen() {
    this.fullscreenService.toggle();
  }
}

Answer 2

HTMLElement 和 Element 的类型没有定义像 mozFullScreenElement 和 ALLOW_KEYBOARD_INPUT 这样的一些属性，因此即使生成的 JavaScript 代码可以正常工作，TypeScript 编译器也不满意。

快速而简单的解决方法是将所有给您带来麻烦的东西都交给<any>。更复杂的方法是定义您自己的扩展 HTMLElement 和 Element 的接口，如下所示：

interface MyHTMLElement extends HTMLElement {
  mozFullScreenElement?: boolean;
  webkitFullscreenElement?: boolean;
  // ...etc...
}

...并像这样将元素对象转换为<any>。

编辑：我想自己使用这个全屏代码，所以我制作了一个完整的 TypeScript 友好版本：

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

到目前为止，我已经在 Chrome、Firefox 和 Safari 以及 macOS 上运行过它，而且效果很好。

Answer 3

因为这些属性 mozFullScreenElement、msFullscreenElement... 是基于供应商的，所以没有为它定义类型。解决此问题的一种快速方法是将所有这些属性更改为 document['mozFullScreenElement']