Angular Signal Effect仅在Interval调用set时触发，窗口变化失效

问题场景 #

我用Angular Signal重构媒体查询监听指令，替换冗余的RxJS逻辑，但遇到异常：

• 指令通过window.matchMedia监听窗口断点变化，控制台能正常打印断点更新日志，但AppComponent中监听activeBreakpoint的effect仅在页面初始化时执行两次，窗口大小变化时完全无响应。
• 改用interval随机更新Signal时，effect能正常响应每次变化。

原指令代码 #

@Directive({
  standalone: true,
})
export class SDKMediaQueriesMixin extends SDKSubscriptionsManager implements OnInit {

  private readonly breakpointSignal = signal<Nullable<SDKBreakpoint>>(null);

  public readonly breakpoints: LibBreakpointMap<string> = {};
  public readonly breakpointNames: LibBreakpointName[] = [];

  private matches$: Observable<(MediaQueryListEvent | Partial<MediaQueryListEvent>)[]> = EMPTY;

  constructor(@Inject(DOCUMENT) private document: Document, private applicationManager: SDKApplicationManager) {
    super();

    if (this.applicationManager.isBrowser) {
      this.breakpoints.mobile = getComputedStyle(this.document.documentElement).getPropertyValue('--mobile');
      this.breakpoints.tablet = getComputedStyle(this.document.documentElement).getPropertyValue('--tablet');
      this.breakpoints.desktop = getComputedStyle(this.document.documentElement).getPropertyValue('--desktop');
      this.breakpoints.fullhd = getComputedStyle(this.document.documentElement).getPropertyValue('--fullhd');

      this.breakpointNames = Object.keys(this.breakpoints) as LibBreakpointName[];

      const bpValues = Object.values(this.breakpoints);
      const queries = bpValues.map((bp) => `(min-width: ${bp})`);

      const matches$ = queries.map((query) => {
        const matchMedia = window.matchMedia(query);

        return fromEventPattern<Partial<MediaQueryListEvent>>(
          matchMedia.addListener.bind(matchMedia),
          matchMedia.removeListener.bind(matchMedia)
        ).pipe(startWith({ matches: matchMedia.matches, media: matchMedia.media }));
      });

      this.matches$ = combineLatest(matches$);
    }
  }

  ngOnInit() {

    if (this.applicationManager.isBrowser && this.matches$) {
      this.newSubscription = this.matches$.pipe(
        map((events) => events.map((event) => event.matches)),
        map((matches) => new SDKBreakpoint(this.breakpointNames[matches.lastIndexOf(true)]))
      )
      .subscribe((breakpoint) => {
        console.log('breakpoint is changing', breakpoint);
        this.breakpointSignal.set(breakpoint);
      });
    }
  }

  public get activeBreakpoint() {
    return this.breakpointSignal();
  };
}

原AppComponent代码 #

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  standalone: true,
  imports: [RouterModule, LibAnchorComponent],
  hostDirectives: [SDKMediaQueriesMixin]
})
export class AppComponent {

  constructor(private mediaQueriesMixin: SDKMediaQueriesMixin) {

    effect(() => {
      console.log('breakpoint changed', this.mediaQueriesMixin.activeBreakpoint);
    });
  }
}

问题原因 #

核心原因是：MediaQueryList的回调运行在Angular Zone之外。

Angular的Signal Effect依赖于变更检测上下文来感知Signal的更新。当在Zone外执行signal.set()时，Signal的更新不会触发变更检测，Effect也就无法捕获到变化。

而interval这类RxJS异步操作默认运行在Angular Zone内，会自动触发变更检测，因此Signal的更新能被Effect正常捕获。

解决方案 #

将signal.set()的操作包裹到Angular Zone中执行，确保Signal的更新触发变更检测，让Effect感知到变化。

修改后的指令代码 #

1. 注入NgZone服务：

constructor(
  @Inject(DOCUMENT) private document: Document, 
  private applicationManager: SDKApplicationManager,
  private ngZone: NgZone // 新增注入NgZone
) {
  super();
  // ... 原有构造函数代码
}

2. 在订阅回调中用ngZone.run()包裹Signal更新：

.subscribe((breakpoint) => {
  console.log('breakpoint is changing', breakpoint);
  this.ngZone.run(() => {
    this.breakpointSignal.set(breakpoint);
  });
});

验证效果 #

修改后，窗口大小变化时，AppComponent中的effect会正常打印断点变更日志，和指令中的日志同步。

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