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

【问题标题】：Angular 5 - How to getElementById from element inside *ngIf div?Angular 5 - 如何从 *ngIf div 中的元素获取ElementById？
【发布时间】：2020-01-18 03:21:33
【问题描述】：

我想在我的页面上添加一个可以滑入视图的叠加层。为此，我在覆盖打开和关闭期间设置了 div 的 style.width。问题是 div 由 *ngIf 控制，当我的 .ts 代码将 *ngIf 设置为 true 并尝试设置 div 的宽度时，该 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%";
    }

谢谢！鲍勃

【问题讨论】：

标签： html angular

【解决方案1】：

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

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

【讨论】：

这确实是一个优雅的解决方案。谢谢理查德，它工作得很好！

【解决方案2】：

看起来你没有遵循有角度的方式。要获得任何元素角度建议使用@ViewChild。所以正确的方法如下：

<div *ngIf="showOverlay === true">
   <div #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>

然后在你的类文件上像这样访问它：

@ViewChild('myOverlay', { static: false }) myOverlay: ElementRef;

即使在此之后，如果您无法获取元素，也会触发更改检测，例如：this.changeDetectorRef.detectChanges();。请记住在你的构造函数中注入ChangeDetectorRef。

【讨论】：

我不熟悉那个 {static: false} 构造，所以我无法解决错误：Argument of type '{ static: boolean; }' 不能分配给 '{ read?: any; 类型的参数。 }'.Object 字面量只能指定已知属性，而 '{ read?: any; 类型中不存在 'static' }'。任何想法？谢谢。
那么您是否尝试过像这样提供读取属性：@ViewChild('myOverlay', { read: ElementRef, static: false })？
是的，同样的错误。没关系，理查德给了我有效的解决方案。谢谢凯鲁尔。
不客气。最后尝试将元素 ref 放入 div 中，其中存在 *ngIf <div #myOverlay *ngIf="showOverlay === true">

【解决方案3】：

尝试使用 setTimeout 函数，因为 ngIf 可能会延迟启用元素。

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

【讨论】：