如何在Angular的html页面中获取应用按钮的位置

Question

我在带有多个过滤器的过滤器栏中有一个应用按钮，有时此应用按钮将显示在下一行，而不是与其他过滤器显示在同一行中。我如何识别此 的位置应用按钮以识别它在 html 页面中的显示位置。

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

应用按钮和其他过滤器在这个<div class="filter-container">中。这是我的组件代码。

 const fpH = $('.apply').positionY;
 console.log(fpH); 

但是console.log(fpH); 打印为undefined。我尝试使用paddingRight，但它也显示为undefined

我能做些什么

Answer 1

$('.apply') 搜索具有类 apply 的元素，看起来您正在尝试查找具有 id 类的元素，如果要使用，则其选择器为 '#apply'，所以在你的情况下，用$('#apply')替换$('.apply')

但是，您应该使用 Angular 的 ViewChild 来做您正在寻找的事情。

所以你的 html 看起来像：

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

在你的组件中：

@ViewChild('applyBtn') applyBtn: ElementRef;

当你想要访问元素时（在组件中）：

this.applyBtn.nativeElement.getBoundingClientRect()

这将为您提供元素的位置和尺寸

这是stackblitz