Angular：子@if内容变更时如何重渲染父div？解决表达式异常

问题背景 #

我实现了一个跟随光标浮动的Tooltip组件，其尺寸由内部内容动态决定。为了确保Tooltip始终在视口内完全可见，我通过Tooltip容器的offsetHeight/offsetWidth结合光标位置计算并绑定top和left样式。

模板代码：

@if (cursorLocation()) {
  <div #tooltipContainer
       [style.top]="'max(' + (tooltipContainer.offsetHeight + 40) + 'px,' + cursorLocation()!.top + 'px)'"
       [style.left]="'min(100vw - ' + (10 + tooltipContainer.offsetWidth / 2) + 'px, max(' + (10 + tooltipContainer.offsetWidth / 2) + 'px,' + cursorLocation()!.left + 'px))'">
    <div class="mat-mdc-dialog-content">
      @if (dataHandler.selectedWord()) {
        {{dataHandler.selectedWord()?.translation}}
      } @else {
        <wb-loading-screen></wb-loading-screen>
      }
    </div>
  </div>
}

组件核心代码：

export class BaseTooltipComponent {
  public readonly cursorLocation: ModelSignal<{ top: number, left: number } | undefined> = model.required();
}

export class WordTooltipComponent extends BaseTooltipComponent {
  public readonly dataHandler: WordHandler = inject(WordHandler);
  public readonly ids: InputSignal<{ languageId: string,
                                     wordId: string } | undefined> = input.required();

  constructor() {
    super();
    effect(this._initWords.bind(this), { allowSignalWrites: true });
  }

  private _initWords(): void {
    if (!this.ids()) { return; }
    this.dataHandler.read(this.ids()!.wordId, this.ids()!.languageId);
  }
}

当Tooltip显示后，dataHandler更新selectedWord信号，导致Tooltip内部内容从加载态切换为翻译文本，此时触发以下异常：

ERROR RuntimeError: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'top': 'max(166px, 442px)'. Current value: 'max(154px, 442px)'

仅offsetHeight会触发该问题，offsetWidth无异常。需要在不将整个Tooltip容器包裹在@if中的前提下，解决这个变更检测异常。

原因分析 #

Angular的变更检测机制会在组件渲染完成后检查绑定表达式的值是否稳定。当Tooltip内部内容更新时，容器的offsetHeight发生变化，但此时当前变更检测周期已经完成，导致[style.top]绑定的表达式值在检测后发生了变化，Angular因此抛出异常。offsetWidth未触发异常可能是因为内容更新后宽度未发生变化，或者变化幅度未被检测到。

解决方案 #

方案1：使用afterNextRender钩子手动调整位置 #

将样式计算逻辑从模板绑定移到组件代码中，在内容渲染完成后（通过afterNextRender钩子）重新计算并设置Tooltip的位置，避免变更检测冲突。

1. 在组件中获取Tooltip容器的引用：

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

export class WordTooltipComponent extends BaseTooltipComponent {
  @ViewChild('tooltipContainer') tooltipContainer!: ElementRef<HTMLDivElement>;
  // 原有代码...
}

2. 监听selectedWord变化，在渲染完成后调整位置：

constructor() {
  super();
  effect(this._initWords.bind(this), { allowSignalWrites: true });
  
  effect(() => {
    // 当selectedWord更新时，触发位置调整
    if (this.dataHandler.selectedWord()) {
      afterNextRender(() => {
        this._adjustTooltipPosition();
      });
    }
  });
}

private _adjustTooltipPosition(): void {
  const container = this.tooltipContainer.nativeElement;
  const cursor = this.cursorLocation();
  if (!container || !cursor) return;
  
  // 重新计算top和left值
  const topValue = `max(${container.offsetHeight + 40}px, ${cursor.top}px)`;
  const leftValue = `min(100vw - ${10 + container.offsetWidth / 2}px, max(${10 + container.offsetWidth / 2}px, ${cursor.left}px))`;
  
  // 直接设置DOM样式
  container.style.top = topValue;
  container.style.left = leftValue;
}

3. 修改模板，移除原有的[style.top]和[style.left]绑定：

@if (cursorLocation()) {
  <div #tooltipContainer>
    <div class="mat-mdc-dialog-content">
      @if (dataHandler.selectedWord()) {
        {{dataHandler.selectedWord()?.translation}}
      } @else {
        <wb-loading-screen></wb-loading-screen>
      }
    </div>
  </div>
}

方案2：使用ChangeDetectorRef手动触发变更检测 #

在内容更新后，手动触发一次变更检测，让Angular认可新的offsetHeight计算出的样式值。

1. 注入ChangeDetectorRef：

import { ChangeDetectorRef } from '@angular/core';

export class WordTooltipComponent extends BaseTooltipComponent {
  private cdr = inject(ChangeDetectorRef);
  // 原有代码...
}

2. 监听selectedWord变化，延迟触发变更检测：

constructor() {
  super();
  effect(this._initWords.bind(this), { allowSignalWrites: true });
  
  effect(() => {
    if (this.dataHandler.selectedWord()) {
      // 通过微任务延迟，确保DOM已更新完成
      queueMicrotask(() => {
        this.cdr.detectChanges();
      });
    }
  });
}

此方案无需修改模板，保留原有的样式绑定即可。

方案3：使用computed信号封装位置计算逻辑 #

将位置计算逻辑封装为响应式的computed信号，依赖cursorLocation和selectedWord，确保内容更新时自动重新计算位置。

1. 定义computed信号：

import { computed } from '@angular/core';

export class WordTooltipComponent extends BaseTooltipComponent {
  @ViewChild('tooltipContainer') tooltipContainer!: ElementRef<HTMLDivElement>;
  
  readonly tooltipTop = computed(() => {
    const cursor = this.cursorLocation();
    const container = this.tooltipContainer.nativeElement;
    if (!cursor || !container) return '0px';
    return `max(${container.offsetHeight + 40}px, ${cursor.top}px)`;
  });
  
  readonly tooltipLeft = computed(() => {
    const cursor = this.cursorLocation();
    const container = this.tooltipContainer.nativeElement;
    if (!cursor || !container) return '0px';
    return `min(100vw - ${10 + container.offsetWidth / 2}px, max(${10 + container.offsetWidth / 2}px, ${cursor.left}px))`;
  });
  
  // 原有代码...
}

2. 修改模板绑定为computed信号：

@if (cursorLocation()) {
  <div #tooltipContainer
       [style.top]="tooltipTop()"
       [style.left]="tooltipLeft()">
    <div class="mat-mdc-dialog-content">
      @if (dataHandler.selectedWord()) {
        {{dataHandler.selectedWord()?.translation}}
      } @else {
        <wb-loading-screen></wb-loading-screen>
      }
    </div>
  </div>
}

注意：由于computed信号依赖DOM的offsetHeight属性，若内容更新后DOM未及时刷新，可能需要结合afterNextRender确保计算时机正确。

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