Question

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

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。

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

Answer 1

您可以使用依赖注入。

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

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

如何获取Component自己的ElementRef来检索此Component的BoundingClientRect？

1 个答案: