如何获取组件自己的 ElementRef 以检索此组件的 BoundingClientRect？

Posted 2023-03-13

【中文标题】如何获取组件自己的 ElementRef 以检索此组件的 BoundingClientRect？

【英文标题】：How to get a Component's own ElementRef for retrieving BoundingClientRect of this Component?

【发布时间】：2018-09-29 01:04:35

【问题描述】：

我使用 Angular 5.2.0 和 ngrx 构建了一个工具提示。当状态更新时，工具提示（除其他外）获取一个指向它应该附加的元素的 ElementRef（= 目标）。有了这个目标，我可以将 Tooltip 放在绝对位置：

let rect = state.tooltip.target.nativeElement.getBoundingClientRect();
if (rect) 
  this.position.left = rect.left;
  this.position.top = rect.top;

state.tooltip.target 是ElementRef 类型，打开工具提示的元素通过@ViewChild 获得：

@ViewChild('linkWithTooltip') tooltipTarget: ElementRef;

openTooltip() 
    if (this.tooltipOpen) 
      this.tooltipAction.closeTooltip();
     else 
      this.tooltipAction.openTooltip(
        text: 'foo',
        target: this.tooltipTarget
      );
    
    this.tooltipOpen = !this.tooltipOpen;

在模板中引用：

<a #linkWithTooltip href="">Lorem</a>

如here 所述（以及许多其他地方）。

但是，为了能够正确定位工具提示，我必须在渲染后知道工具提示的大小（例如使其居中）。我需要的是 Tooltip 本身的 ElementRef 而不是 ViewChild。

如何获取当前组件的尺寸？我可以通过组件的 ElementRef 检索它们吗？如果是，我如何获得 ElementRef？

【参考方案1】：

您可以使用依赖注入。

import  Component, ElementRef  from '@angular/core';

@Component( selector: 'tooltip' )
class TooltipComponent 
   constructor(private ref: ElementRef) 

【讨论】：

谢谢，我可以访问 ref.nativeElement.getBoundingClientRect()，但是所有的值都是零——我认为这是因为它还没有被渲染。有没有办法解决这个问题？在渲染之前，我需要元素的高度和宽度。

尝试在ngAfterViewInit生命周期钩子中访问getBoundingClientRect()。

ngAfterViewInit 只被调用一次，工具提示通常由用户操作呈现，所以不幸的是这不起作用......我试过ngAfterContentChecked 但我得到了相同的结果（零值）。另一方面，使用ngAfterViewChecked，我得到ExpressionChangedAfterItHasBeenCheckedError（这似乎合乎逻辑）。我会问一个后续问题，因为您的回答绝对适合我提出的问题。