Angular 5 全屏单 div 容器

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();
    }
  }

///////////////编辑///////////////

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"> Toggle fullscreen </a>
<div class="row" #fullScreen>
   <grid>
       stuff
   </grid>
</div>

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

@ViewChild('fullScreen') divRef;

openFullscreen() {
  // Use this.divRef.nativeElement here to request fullscreen
  const elem = this.divRef.nativeElement;

  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
  } else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) {
    elem.webkitRequestFullscreen();
  }
}