html - 如何使用 getBoundingClientRect() 在 Angular 的 html 页面中根据 div 部分的位置执行一些操作

Question

我在带有多个过滤器的过滤器栏中有一个应用按钮，有时此应用按钮将显示在下一行，而不是与其他过滤器显示在同一行中。如何根据此应用按钮的位置执行一组操作。如果应用按钮在下一行，我想做一组动作。

  <button (click)="apply() "
                    [ngClass]="{'a-btn--disabled': isDisable}" id="apply"
                    mat-raised-button  >Apply
           </button>

在我使用的组件中getBoundingClientRect()，

 const height = document.getElementById('apply').getBoundingClientRect();
 console.log(height);

我试图getBoundingClientRect()从顶部获取价值，以便在第一行或第二行中识别它。但是getBoundingClientRect().top在不同的时间返回不同的值。因此无法根据这些getBoundingClientRect()值应用特定条件来在第一行或第二行中识别它。我该如何解决这个问题？

Answer 1

您可以在按钮上方定义一个元素，如 span，并将 id 属性从按钮替换为 span。那么你可以从 span 中获取边界客户端矩形（），它根本不会改变。

<span id=apply></span>
  <button (click)="apply() "
                    [ngClass]="{'a-btn--disabled': isDisable}"
                    mat-raised-button  >Apply
           </button>