html - Angular 5 - 如何从 *ngIf div 中的元素获取 ElementById？

Question

我想在我的页面上添加一个可以滑入 View 的叠加层。为此，我在打开和关闭叠加层期间设置了 div 的 style.width。问题是 div 由 *ngIf 控制，并且当我的 .ts 代码设置 *ngIf true 并尝试设置 div 的宽度时未定义。

我怎样才能让它工作？

组件 HTML:

    <div  *ngIf="showOverlay === true">
       <div id="myOverlay" class="overlay" style="margin-top: 25px;">
         <a href="javascript:void(0)" class="closebtn" (click)="closeOverlay()">&times;</a>
         <div class="overlay-content">
           <a href="#">Overlay is working!</a>
         </div>
       </div>
    </div>

    <div *ngIf="showOverlay === false" id="content" style="padding: 30px;">
    ...
    </div>

组件 TS:

    public showOverlayFcn() {
      this.showOverlay = true;
      this.openOverlay();
    }  

    public openOverlay() {
      document.getElementById("myOverlay").style.width = "100%";
    }

    public closeOverlay() {
      document.getElementById("myOverlay").style.width = "0%";
    }

谢谢!鲍勃

Answer 1

您可以尝试在 ID 为 myOverlay 的 div 上使用条件 ngStyle 属性:

[ngStyle]="{'width': showOverlay ? '100%' : '0%'}"