Question

我在div内有一个网格。我可以使用一个功能进入全屏状态，但是我只想使带有网格的div处于全屏状态。到目前为止，我所能找到的只限于使整个网页全屏显示。这就是我所拥有的。

    <a (click)="openFullscreen()"title="Full Screen" style="padding-right: 5px"><i class="fa fa-arrows-alt"></i></a>
    <div class="row">
            <grid>
                stuff
           </grid>
        </div>

TS

openFullscreen() {
    if (this.elem.requestFullscreen) {
      this.elem.requestFullscreen();
    } else if (this.elem.mozRequestFullScreen) {
      /* Firefox */
      this.elem.mozRequestFullScreen();
    } else if (this.elem.webkitRequestFullscreen) {
      /* Chrome, Safari and Opera */
      this.elem.webkitRequestFullscreen();
    } else if (this.elem.msRequestFullscreen) {
      /* IE/Edge */
      this.elem.msRequestFullscreen();
    }
  }

/////////////// EDITS //////////////

TS

  @ViewChild('fullScreen') divRef;

  ngOnInit() {
    this.divRef = document.documentElement;        
  }

openFullscreen() {
    if (this.divRef.requestFullscreen) {
      this.divRef.requestFullscreen();
    } else if (this.divRef.mozRequestFullScreen) {
      /* Firefox */
      this.divRef.mozRequestFullScreen();
    } else if (this.divRef.webkitRequestFullscreen) {
      /* Chrome, Safari and Opera */
      this.divRef.webkitRequestFullscreen();
    } else if (this.divRef.msRequestFullscreen) {
      /* IE/Edge */
      this.divRef.msRequestFullscreen();
    }
  }

HTML

    <a (click)="openFullscreen()"title="Full Screen" style="padding-right: 5px"><i class="fa fa-arrows-alt"></i></a>
    <div class="well" #fullScreen>
        <grid>
             stuff
        </grid>
    </div>

Answer 1

您可以为要全屏显示的元素设置template variable：

<a (click)="openFullscreen()" title="Full Screen"></a>
<div class="row" #fullScreen>
   <grid>
       stuff
   </grid>
</div>

然后在组件中，您可以使用View Child decorator获得对该元素的引用并执行您已经拥有的功能：

@ViewChild('fullScreen') divRef;

openFullscreen() {
  // Use this.divRef.nativeElement here to request fullscreen
}

Angular 5全屏Single div容器

1 个答案: