如何在Angular中使用getBoundingClientRect()基于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中获取boundingclientrect()，它根本不会改变。

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