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

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类型,打开Tooltip的元素通过@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>

描述在这里(和许多其他地方).

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

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

Answer 1

您可以使用依赖注入.

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

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