Angular 使用screenfull.js全屏组件

screenfull.js用法

安装全屏组件

npm i screenfull

Angular使用

// 引用
import * as screenfull from 'screenfull';

@Component({
  selector: 'app-header-fullscreen',
  template: `
    <i nz-icon [nzType]="status ? 'fullscreen-exit' : 'fullscreen'"></i>
    {{ (status ? 'fullscreen.exit' : 'fullscreen') | translate }}
  `,
  host: {
    '[class.d-block]': 'true',
  },
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HeaderFullScreenComponent {
  status = false;

  private get sf(): screenfull.Screenfull {
    return screenfull as screenfull.Screenfull;
  }

  @HostListener('window:resize')
  _resize(): void {
    this.status = this.sf.isFullscreen;
  }

  @HostListener('click')
  // 触发全屏直接调用此方法
  _click(): void {
    if (this.sf.isEnabled) {
      this.sf.toggle();
    }
  }
}