Angular 19中ViewChild滚动容器初始化居中偶发失效问题求助

我在Angular 19应用中实现了一个垂直滚动容器组件，容器外内容会被隐藏，点击按钮可使内容居中，无水平滚动。最初通过构造函数中的effect实现内容初始居中，代码如下：

element = viewChild.required<ElementRef>('myWindow');

#scrollTo = computed(() => {
  const nativeElement = this.element().nativeElement;
  const scrollHeight: number = nativeElement.scrollHeight;
  const offsetHeight: number = nativeElement.offsetHeight;

  return 4 + (scrollHeight - offsetHeight) / 2;
});

constructor() {
  effect(() => 
    this.element().nativeElement.scrollTo(0, this.#scrollTo())
  );
}

多数情况下scrollHeight为700px、offsetHeight为300px，功能正常；但在Chrome中每10-15次刷新就会出现一次scrollHeight与offsetHeight相同（均为38px）的情况，导致居中失效。硬编码滚动值无法解决问题，推测是浏览器布局计算与scrollTo信号计算之间存在竞态条件，需要在不添加延迟的前提下修复该行为。

问题根源与修复方案 #

已确认这是Angular框架相关问题，仅在启用Hot Module Replacement（HMR）的开发环境中出现，生产环境不受影响。

生产环境正确方案

使用renderAfterEffect替代普通effect，确保DOM渲染完成后再执行滚动操作，无需额外延迟：

constructor() {
  renderAfterEffect(() => 
      this.element().nativeElement.scrollTo(0, this.#scrollTo())
  );
}

开发环境临时方案

由于HMR环境下renderAfterEffect仍可能失效，需结合setTimeout作为临时 workaround：

constructor() {
  renderAfterEffect(() => 
    setTimeout(() =>
      this.element().nativeElement.scrollTo(0, this.#scrollTo()),
      200
    )
  );
}

注：虽然直接在effect中嵌套setTimeout也能临时解决问题，但遵循Angular最佳实践，DOM交互逻辑应优先使用renderAfterEffect。

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