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>