angular实现指定DIV全屏

前言：

　　项目有需求实现指定内容全屏功能，网上找一圈发现angular框架实现较少，有的文章还有些问题，修改后终于实现了

一、安装依赖

npm install screenfull --save

二、模块内引入 ts文件

import * as screenfull from "screenfull";

import { Screenfull } from "screenfull";

 

方法：

//全屏
  onClickScreenFull() {
    const target = document.getElementById('full-screen');
    const sf = <Screenfull>screenfull;
    if (sf.isEnabled) {
      sf.toggle(target);
    }
  }

三、html文件

 

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