angular7+以上的版本可以使用；demo地址
npm i ngx-fullscreen-icy --save
import { NgModule } from '@angular/core';
import { FullscreenModule } from 'ngx-fullscreen-icy';
@NgModule({
imports: [
FullscreenModule
]
})
export class AppModule { }-
cFullscreenEnter监听指定元素点击事件，展开全屏效果。 -
cFullscreenExit监听当前元素的点击事件，取消全屏效果。 -
*cIfFullscreen在全屏模式显示当前元素。 -
*cIfNotFullscreen在非全屏模式显示当前元素。
<div class="container" #takeMeFullscreen>
<h3>全屏效果</h3>
<h4>这个区域是全屏区域</h4>
<button *cIfFullscreen cFullscreenExit>退出全屏</button>
<button *cIfNotFullscreen [cFullscreenEnter]="takeMeFullscreen">全屏</button>
</div>
<div class="container" #takeMeFullscreen2>
<div>
<video src="https://www.w3school.com.cn/i/movie.ogg" controls="controls">
your browser does not support the video tag
</video>
</div>
<button *cIfFullscreen cFullscreenExit>退出全屏</button>
<button *cIfNotFullscreen [cFullscreenEnter]="takeMeFullscreen2">全屏</button>
</div>