angular2里的全屏设置

有两种全屏，一种是使当前页面全屏，一种是使指定内容全屏

一、安装依赖

npm install screenfull --save

二、模块内引入 ts文件

import * as screenfull from "screenfull";

import { Screenfull } from "screenfull";

三、html

<div id="full-screen">
    
</div>
<button nz-button nzType="primary" (click)="onClickScreenFull()">全屏</button>

四、方法

当前页面全屏

 onClickScreenFull() {
    if(!screenfull.isEnabled) {
      return false
    }
    screenfull.toggle();
  }

指定某个div全屏显示

// 全屏
  onClickScreenFull() {
    // 获取目标div
    const target = this.flagmap1.nativeElement;
    console.log(this.flagmap1.nativeElement);
    // 下面两种写法都行
    // const sf = screenfull as Screenfull;
    const sf = <Screenfull>screenfull;
    console.log(sf.isEnabled);
    if (sf.isEnabled) {
      sf.toggle(target);
    }
  }

npm之后，重启下服务，不然按钮可能无效