如何获取组件自身的ElementRef以获取其BoundingClientRect？

嘿，我来帮你解决这个问题！在Angular 5.2.0里获取tooltip组件自身的ElementRef其实有两种常用方式，刚好适配你用ngrx做tooltip定位的场景，下面给你一步步拆解：

方法一：通过构造函数注入ElementRef #

这是最直接的方式，Angular会自动把组件自身的宿主元素（也就是<app-tooltip>对应的DOM节点）的ElementRef注入到构造函数里。你可以直接用它来获取组件的getBoundingClientRect()。

代码示例： #

import { Component, ElementRef } from '@angular/core';
import { Store } from '@ngrx/store';
import { AppState } from '../path-to-your-app-state';

@Component({
  selector: 'app-tooltip',
  templateUrl: './tooltip.component.html',
  styleUrls: ['./tooltip.component.css']
})
export class TooltipComponent {
  position = { left: 0, top: 0 };

  constructor(
    private store: Store<AppState>,
    private elementRef: ElementRef // 注入组件自身的ElementRef
  ) {
    this.store.select(state => state.tooltip).subscribe(tooltipState => {
      if (tooltipState.target) {
        // 获取目标元素的位置
        const targetRect = tooltipState.target.nativeElement.getBoundingClientRect();
        if (targetRect) {
          this.position.left = targetRect.left;
          this.position.top = targetRect.top;

          // 获取tooltip组件自身的BoundingClientRect
          const tooltipSelfRect = this.elementRef.nativeElement.getBoundingClientRect();
          
          // 举个例子：根据自身高度调整位置，避免覆盖目标元素
          this.position.top += targetRect.height;
          
          // 额外处理：如果tooltip超出视口底部，就调整到目标元素上方
          if (this.position.top + tooltipSelfRect.height > window.innerHeight) {
            this.position.top = targetRect.top - tooltipSelfRect.height;
          }
        }
      }
    });
  }
}

方法二：用@ViewChild获取模板内的根容器 #

如果你的tooltip组件模板有一个包裹所有内容的根容器（比如一个<div>），也可以用@ViewChild来获取这个容器的ElementRef，这种方式更灵活，适合需要针对组件内部特定元素计算的场景。

步骤1：在模板中给根容器加模板引用变量 #

<div #tooltipRoot class="tooltip-content">
  <!-- 你的tooltip内容 -->
  {{ tooltipState.content }}
</div>

步骤2：在组件中获取该引用 #

import { Component, ViewChild, ElementRef } from '@angular/core';
import { Store } from '@ngrx/store';
import { AppState } from '../path-to-your-app-state';

@Component({
  selector: 'app-tooltip',
  templateUrl: './tooltip.component.html',
  styleUrls: ['./tooltip.component.css']
})
export class TooltipComponent {
  position = { left: 0, top: 0 };
  @ViewChild('tooltipRoot') private tooltipRoot: ElementRef; // 获取模板内的根容器

  constructor(private store: Store<AppState>) {
    this.store.select(state => state.tooltip).subscribe(tooltipState => {
      if (tooltipState.target && this.tooltipRoot) {
        const targetRect = tooltipState.target.nativeElement.getBoundingClientRect();
        if (targetRect) {
          this.position.left = targetRect.left;
          this.position.top = targetRect.top;

          // 获取tooltip内部容器的BoundingClientRect
          const tooltipRootRect = this.tooltipRoot.nativeElement.getBoundingClientRect();
          // 这里可以根据需求调整定位逻辑
        }
      }
    });
  }
}

注意事项 #

• 如果你在组件初始化阶段（比如ngOnInit）就需要获取getBoundingClientRect()，建议把订阅逻辑放到ngAfterViewInit钩子中，确保DOM已经渲染完成，避免获取不到元素的情况。
• Angular官方虽然建议尽量减少直接操作DOM，但获取BoundingClientRect这种用于定位计算的场景是完全合理的，不用担心性能或兼容性问题（Angular 5.2.0对这个API的支持没问题）。

内容的提问来源于stack exchange，提问作者Florian Gösssele