升级到@microsoft/signalr后回调不在Angular Zone运行如何解决？

这是@aspnet/signalr升级为@microsoft/signalr后的已知变更：
旧版@aspnet/signalr内置了Angular上下文适配逻辑，回调默认在Angular Zone内触发；新版@microsoft/signalr不再强绑定前端框架的运行上下文，底层改用原生WebSocket、fetch等API实现，回调默认运行在浏览器原生事件上下文，因此脱离了Angular Zone，导致Angular变更检测无法自动触发。

不推荐逐一对所有业务回调手动包裹zone.run()，优先选择全局统一适配的方案，侵入性更低、维护成本更小，可选方案如下：

• 方案1：SignalR服务层封装时统一绑定Zone（最常用，适配绝大多数场景）
  在封装SignalR Hub的服务中注入NgZone，注册回调时统一包裹ngZone.run()，业务侧代码无需任何修改：

  import { Injectable, NgZone } from '@angular/core';
  import { HubConnection } from '@microsoft/signalr';
  
  @Injectable({ providedIn: 'root' })
  export class JobHubService {
    private connection: HubConnection;
    constructor(private ngZone: NgZone) {
      // HubConnection初始化逻辑省略
    }
  
    public async onUpdateJobInfo(callback: (jobInfo: JobInfo) => void): Promise<void> {
      return this.connection.on('someInvokedMethod', (data) => {
        // 统一包裹Zone，所有业务回调自动进入Angular上下文
        this.ngZone.run(() => callback(data));
      });
    }
  }
  

• 方案2：全局重写HubConnection回调注册逻辑（适合多Hub的大型项目）
  在应用初始化阶段一次性重写HubConnection的on方法，所有注册的SignalR回调自动绑定Angular Zone，无需逐个修改Hub服务的封装逻辑：

  import { NgZone } from '@angular/core';
  import { HubConnection } from '@microsoft/signalr';
  
  // 应用启动时执行一次即可
  const originalOn = HubConnection.prototype.on;
  HubConnection.prototype.on = function (methodName: string, callback: (...args: any[]) => void) {
    // 提前获取全局NgZone实例即可，也可通过依赖注入上下文获取
    const ngZone = window['angularZoneInstance'] as NgZone;
    return originalOn.call(this, methodName, (...args) => {
      ngZone.run(() => callback(...args));
    });
  };
  

• 方案3：业务侧手动包裹Zone（适合临时修复少量回调场景）
  如果项目中SignalR回调数量极少，可直接在业务回调处包裹ngZone.run()：

  // 业务组件中先注入NgZone
  constructor(private ngZone: NgZone) {}
  
  // 注册回调时手动包裹
  this.jobHub.onUpdateJobInfo((jobInfo: JobInfo) => {
    this.ngZone.run(() => this.updateJobInfo(jobInfo));
  });
  

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