Question

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

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

const mapStateToProps = ({ user, retrospectives }) => {
    return {
      userData: user.userData,
      isLogged: user.isLogged,
      organizations: user.organizations,
      retroFinished: retrospectives.retrospective.finished,
      linkToRetro: retrospectives.joinedRetro,
    }
  };

当我使用＆＃34; ng serve＆＃34;编译应用程序，FullScreen Button工作，但它给我以下错误：

ERROR in src/app/commom/breadcrumb/breadcrumb.component.ts(41,64): error TS2339: Property 'mozRequestFullScreen' does not exist on type 'HTMLElement'.
src/app/commom/breadcrumb/breadcrumb.component.ts(41,127): error TS2551: Property 'msRequestFullscreen' does not exist on type 'HTMLElement'. Did you mean 'requestFullscreen'?
src/app/commom/breadcrumb/breadcrumb.component.ts(42,56): error TS2339: Property 'mozCancelFullScreen' does not exist on type 'Document'.
src/app/commom/breadcrumb/breadcrumb.component.ts(42,111): error TS2551: Property 'msExitFullscreen' does not exist on type 'Document'. Did you mean 'exitFullscreen'?
src/app/commom/breadcrumb/breadcrumb.component.ts(44,41): error TS2339: Property 'mozFullScreenElement' does not exist on type 'Document'.
src/app/commom/breadcrumb/breadcrumb.component.ts(44,102): error TS2551: Property 'msFullscreenElement' does not exist on type 'Document'. Did you mean 'fullscreenElement'?
src/app/commom/breadcrumb/breadcrumb.component.ts(103,19): error TS2339: Property 'mozFullScreenElement' does not exist on type 'Document'.
src/app/commom/breadcrumb/breadcrumb.component.ts(103,90): error TS2551: Property 'msFullscreenElement' does not exist on type 'Document'. Did you mean 'fullscreenElement'?
src/app/commom/breadcrumb/breadcrumb.component.ts(107,43): error TS2551: Property 'msRequestFullscreen' does not exist on type 'HTMLElement'. Did you mean 'requestFullscreen'?
src/app/commom/breadcrumb/breadcrumb.component.ts(108,34): error TS2551: Property 'msRequestFullscreen' does not exist on type 'HTMLElement'. Did you mean 'requestFullscreen'?
src/app/commom/breadcrumb/breadcrumb.component.ts(109,43): error TS2339: Property 'mozRequestFullScreen' does not exist on type 'HTMLElement'.
src/app/commom/breadcrumb/breadcrumb.component.ts(110,34): error TS2339: Property 'mozRequestFullScreen' does not exist on type 'HTMLElement'.
src/app/commom/breadcrumb/breadcrumb.component.ts(112,9): error TS2554: Expected 0 arguments, but got 1.
src/app/commom/breadcrumb/breadcrumb.component.ts(112,66): error TS2339: Property 'ALLOW_KEYBOARD_INPUT' does not exist on type '{ new (): Element; prototype: Element; }'.
src/app/commom/breadcrumb/breadcrumb.component.ts(117,27): error TS2551: Property 'msExitFullscreen' does not exist on type 'Document'. Did you mean 'exitFullscreen'?
src/app/commom/breadcrumb/breadcrumb.component.ts(118,18): error TS2551: Property 'msExitFullscreen' does not exist on type 'Document'. Did you mean 'exitFullscreen'?
src/app/commom/breadcrumb/breadcrumb.component.ts(119,27): error TS2339: Property 'mozCancelFullScreen' does not exist on type 'Document'.
src/app/commom/breadcrumb/breadcrumb.component.ts(120,18): error TS2339: Property 'mozCancelFullScreen' does not exist on type 'Document'.

有人可以帮助我吗？

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

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

Angular 2/4上的FullScreen请求

2 个答案: