Angular 14路由切换后如何获取元素的正确坐标？

问题原因 #

从其他路由返回当前路由时，ngAfterViewInit触发阶段，浏览器可能还未完成DOM的重排重绘（比如样式应用、异步内容渲染），导致getBoundingClientRect()返回的坐标不准确。而ngAfterViewChecked会在每次变更检测后触发，此时DOM已完成更新，但它会频繁执行，需要做额外控制。

最优处理方式 #

1. 使用requestAnimationFrame（推荐） #

利用浏览器的重绘机制，在下次重绘前获取坐标，确保DOM已完全更新：

ngAfterViewInit(): void {
  // 等待浏览器下一次重绘时获取坐标
  requestAnimationFrame(() => {
    const position = this.testElement.nativeElement.getBoundingClientRect();
    const y = position.top;
    // 这里处理坐标逻辑
  });
}

这个方法不会频繁触发，仅在浏览器准备好重绘时执行一次，能保证坐标的准确性。

2. 控制ngAfterViewChecked的执行次数 #

如果必须用ngAfterViewChecked，可以通过标志位结合路由事件，确保只在路由返回时执行一次坐标获取：

import { Router, NavigationEnd } from '@angular/router';
import { filter, take } from 'rxjs/operators';

// 组件内部变量
private isPositionCalculated = false;

constructor(private router: Router) {
  // 监听路由切换完成事件，重置计算标志
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd),
    take(1)
  ).subscribe(() => {
    this.isPositionCalculated = false;
  });
}

ngAfterViewChecked(): void {
  if (!this.isPositionCalculated && this.testElement) {
    const position = this.testElement.nativeElement.getBoundingClientRect();
    const y = position.top;
    // 处理坐标逻辑
    this.isPositionCalculated = true;
  }
}

3. 结合异步内容加载时机 #

如果组件存在异步数据加载（比如接口请求），需要在数据渲染完成后再获取坐标：

import { take } from 'rxjs/operators';

// 假设异步数据Observable
private data$ = this.yourDataService.fetchData();

ngAfterViewInit(): void {
  this.data$.pipe(take(1)).subscribe(() => {
    // 数据渲染后等待重绘
    requestAnimationFrame(() => {
      const position = this.testElement.nativeElement.getBoundingClientRect();
      const y = position.top;
      // 处理坐标逻辑
    });
  });
}

内容的提问来源于stack exchange，提问作者aburton