angular - 如何让谷歌浏览器在 Angular 4 应用程序中全屏显示？

Question

我正在开发一个应用程序，我想在其中实现这样的事情，如果用户离开一个组件并进入另一个组件，那么在其他组件的 ngOnInit 方法中，chrome 浏览器应该像我们按 Fn + F11 键时一样全屏显示。

感谢任何帮助或引用。

Answer 1

如何 - 全屏 - https://www.w3schools.com/howto/howto_js_fullscreen.asp

这是目前的“Angular 方式”。

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