Question

我正在Angular 5中实现一个通用的工具提示。为了正确定位（特别是相对于目标元素的居中），我需要在渲染之前获得工具提示的宽度和高度。

我已经知道如何从this question获取组件的尺寸。但是，我需要先设置工具提示的内容（让浏览器确定大小）来计算位置。然后，第二，我想设置位置并添加一个类来显示它。

这是我的代码：

// tooltip.component.html
<div class="popup fade"
  [ngClass]="tooltip?.isOpen ? 'show' : ''"
  [style.left.px]="calculatedPos?.left"
  [style.top.px]="calculatedPos?.top">
  {{ tooltip?.text }}
</div>

// tooltip.component.ts
export class TooltipComponent {
  public tooltip: any;
  public calculatedPos: TooltipPosition = {
    left: 0,
    top: 0
  }

  constructor(private store: Store<any>, private ref: ElementRef) {
    this.store.subscribe((state) => this.render(state));
  }

  render () {
    let targetRect = this.tooltip.targetEl 
          && this.tooltip.targetEl.nativeElement
          && this.tooltip.targetEl.nativeElement.getBoundingClientRect()
          || null;
    let tooltipRect = this.ref 
          && this.ref.nativeElement
          && this.ref.nativeElement.getBoundingClientRect()
          || null;
    if (targetRect && tooltipRect) { // <-- tooltipRect.height /.width is zero here!
      switch (this.tooltip.placement) {
        case 'right':
          this.calculatedPos = this.calculatePositionRight(targetRect, tooltipRect, this.tooltip.offset)
          break;
          // and so on...
  }
}

我尝试使用lifecycleHooks：

ngAfterContentChecked会得出相同的结果
ngAfterViewChecked给了我（可预见的）ExpressionChangedAfterItHasBeenCheckedError
ngOnChanges

所以：如何在呈现内容之前获取Component的尺寸？或者我如何检测正在呈现的内容然后更新位置？

我的下一个想法是使用超时来首先让组件渲染然后设置位置（没有用户注意到） - 但也许有一个最佳实践，我还不知道。

Answer 1

为了获得元素的尺寸，您必须等待它被渲染。

如果DOM中没有元素，则无法获得其尺寸。

使用ngAfterViewInit，此时视图已初始化。

Answer 2

我认为无法在ngAfterViewInit中设置订阅。要绕过ExpressionChangedAfterItHasBeenCheckedError，您可以告诉Angular您“知道自己在做什么”。插入ChangeDetectorRef并将detectChanges调用放在render方法的末尾。

如何在渲染之前获取Angular 5中的Component的尺寸？

2 个答案: