Angular Signals中能否用viewChild+effect监听子元素滚动变化？

你的方案失效是因为scrollTop属于DOM原生属性，不在Angular Signals的响应式依赖追踪体系里。computed只会监听内部引用的Signal/Computed信号变化，原生DOM属性的变更无法触发Signals的变化检测机制，导致contentScrollTop不会自动更新，关联的effect也就不会执行。

核心思路是用Signal存储滚动状态，通过DOM的scroll事件主动更新这个Signal，让Signals的响应式系统能感知到变化并触发后续逻辑。具体代码如下：

import { Component, viewChild, ElementRef, signal, effect, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-your-component',
  template: `<div #contentPanel style="overflow-y: auto; height: 300px;">
    <!-- 你的滚动内容 -->
  </div>`
})
export class YourComponent implements OnInit, OnDestroy {
  contentPanel = viewChild.required<ElementRef>('contentPanel');
  // 用Signal存储scrollTop值
  scrollTop = signal(0);
  private scrollHandler?: () => void;

  constructor() {
    // 监听Signal变化，执行逻辑
    effect(() => {
      console.log('scrolltop: ', this.scrollTop());
    });
  }

  ngOnInit() {
    const panelElement = this.contentPanel().nativeElement;
    // 绑定scroll事件，更新Signal
    this.scrollHandler = () => {
      this.scrollTop.set(panelElement.scrollTop);
    };
    panelElement.addEventListener('scroll', this.scrollHandler);
  }

  ngOnDestroy() {
    // 组件销毁时移除监听，避免内存泄漏
    if (this.scrollHandler) {
      this.contentPanel().nativeElement.removeEventListener('scroll', this.scrollHandler);
    }
  }
}

• 这种方式既保留了Signals的响应式特性，又能准确追踪DOM滚动状态变化，是目前最贴合Signals风格的实现方案。
• 组件销毁时必须移除scroll事件监听，这是避免内存泄漏的常规操作，但结合Signal后，后续所有依赖滚动状态的响应式逻辑都能通过Signals体系统一管理。

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