如何获取Angular 5组件元素位置？表格TD定位方案咨询

Great question! The issue you're hitting with ngAfterViewChecked makes total sense—since this hook runs every time Angular finishes checking the view, any DOM updates you make inside it will trigger another round of change detection, leading to that infinite loop risk. Let's break down the better approaches to handle this:

方案1：使用@ViewChildren + MutationObserver（推荐） #

This approach targets only the specific changes that would affect your cell positions, instead of running on every view check. Here's how to implement it:

Step 1: 给目标<td>添加模板引用变量 #

First, add a template reference to your cells so Angular can track them:

<table #tableContainer>
  <tr *ngFor="let item of tableData">
    <td #targetCell class="cell">{{item.content}}</td>
  </tr>
</table>
<!-- 你的叠加div -->
<div *ngFor="let overlay of overlayPositions" 
     class="cell-overlay"
     [style.top.px]="overlay.top"
     [style.left.px]="overlay.left">
</div>

Step 2: 在组件中实现监听逻辑 #

Use @ViewChildren to get all cell references, then use MutationObserver to watch for changes to the table's structure or cell positions. We'll also listen to QueryList changes in case cells are added/removed dynamically:

import { Component, ViewChildren, QueryList, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-table-overlay',
  templateUrl: './table-overlay.component.html',
  styles: [`
    table { position: relative; }
    .cell-overlay { 
      position: absolute; 
      background: rgba(0, 123, 255, 0.2);
      width: 100%;
      height: 100%;
      pointer-events: none; /* 避免遮挡单元格交互 */
    }
  `]
})
export class TableOverlayComponent implements AfterViewInit, OnDestroy {
  @ViewChildren('targetCell') cellElements!: QueryList<ElementRef>;
  overlayPositions: Array<{top: number, left: number}> = [];
  tableData = [/* 你的表格数据 */];
  
  private mutationObserver!: MutationObserver;

  ngAfterViewInit(): void {
    // 初始化位置
    this.updateOverlayPositions();

    // 监听表格的结构/样式变化
    const tableEl = document.querySelector('#tableContainer');
    if (tableEl) {
      this.mutationObserver = new MutationObserver(() => {
        this.updateOverlayPositions();
      });
      this.mutationObserver.observe(tableEl, {
        childList: true,       // 监听子元素添加/删除
        subtree: true,         // 监听所有层级的子节点
        attributes: true,      // 监听属性变化（比如style）
        attributeFilter: ['style'] // 只监听影响位置的style属性
      });
    }

    // 监听单元格列表的变化（比如分页、数据更新）
    this.cellElements.changes.subscribe(() => {
      this.updateOverlayPositions();
    });
  }

  ngOnDestroy(): void {
    // 销毁观察者避免内存泄漏
    if (this.mutationObserver) {
      this.mutationObserver.disconnect();
    }
  }

  private updateOverlayPositions(): void {
    this.overlayPositions = [];
    const tableRect = document.querySelector('#tableContainer')?.getBoundingClientRect();
    
    if (!tableRect) return;

    this.cellElements.forEach(cell => {
      const cellRect = cell.nativeElement.getBoundingClientRect();
      // 计算相对于表格的位置（因为overlay是绝对定位相对于table）
      this.overlayPositions.push({
        top: cellRect.top - tableRect.top,
        left: cellRect.left - tableRect.left
      });
    });
  }
}

方案2：额外监听单元格尺寸变化（可选） #

If your table columns resize dynamically, add a ResizeObserver to track cell size changes:

private resizeObserver!: ResizeObserver;

ngAfterViewInit(): void {
  // ... 之前的MutationObserver代码

  this.resizeObserver = new ResizeObserver(() => {
    this.updateOverlayPositions();
  });

  this.cellElements.forEach(cell => {
    this.resizeObserver.observe(cell.nativeElement);
  });
}

ngOnDestroy(): void {
  // ... 销毁MutationObserver
  if (this.resizeObserver) {
    this.resizeObserver.disconnect();
  }
}

为什么你的原方案有问题？ #

ngAfterViewChecked runs every single time Angular finishes change detection—even for tiny, unrelated changes (like a button text update). If you modify the DOM (e.g., setting overlay positions) inside this hook, Angular detects the change and runs change detection again, creating an infinite loop.

关键注意事项 #

• Always clean up observers in ngOnDestroy to prevent memory leaks.
• Use pointer-events: none on overlays if you don't want them to block interactions with the underlying cells.
• Calculate positions relative to the table (not the window) if your table is inside a scrollable container.

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