Angular 12中SignalR更新的变更检测问题：如何实现视图即时刷新？

我们在Angular中使用SignalR接收消息后，视图需要等待约10秒才会更新，推测和变更检测机制有关。尝试过以下方法但均失败：

• 传入回调函数强制触发变更检测，但执行时变更检测实例为null（推测已被销毁）
• 在SignalR类中加入变更检测，但无法获取变更检测实例
• 使用| async管道绑定，但因hotelData是接口类型而失败

相关代码如下：

SignalR服务代码 #

export class HotelSignalrService extends SignalrService {
  constructor() {
    super();
    this.urlExtention = 'hub';
    if (!this.hubConnected)
        this.startConnection();
  }

  public getHotelDetails(next) {
    this.hubConnection.off('SendHotelDetails');
    this.hubConnection.on('SendHotelDetails', (message) => {
        next(message);
    });
  }
}

订阅消息的类代码 #

public startHotelConnection(hotelId: number, hotelData: HotelData) {
  this.signalRService.connectToGroup(hotelId.toString());
  this.hotelData= hotelData;

  this.signalRService.getHotelDetails((message: any) => this.updateHotelDetails(message));
}

updateHotelDetails方法仅用SignalR传来的消息更新初始传入的hotelData。

1. 用NgZone包裹SignalR回调逻辑 #

SignalR的回调可能运行在Angular的NgZone之外，导致变更检测未及时触发。注入NgZone并将更新逻辑包裹在run方法内，强制在NgZone上下文执行：

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

// 构造函数注入NgZone
constructor(private ngZone: NgZone, private signalRService: HotelSignalrService) {}

public startHotelConnection(hotelId: number, hotelData: HotelData) {
  this.signalRService.connectToGroup(hotelId.toString());
  this.hotelData= hotelData;

  this.signalRService.getHotelDetails((message: any) => {
    this.ngZone.run(() => {
      this.updateHotelDetails(message);
    });
  });
}

2. 用BehaviorSubject包装hotelData实现响应式更新 #

即便hotelData是接口类型，也可以通过BehaviorSubject包装为Observable，配合async管道自动触发变更检测：

步骤1：定义BehaviorSubject #

import { BehaviorSubject } from 'rxjs';

// 传入初始值初始化
private hotelDataSubject = new BehaviorSubject<HotelData>(initialHotelData);
// 对外暴露只读Observable
public hotelData$ = this.hotelDataSubject.asObservable();

步骤2：更新数据时触发Subject #

private updateHotelDetails(message: any) {
  // 合并现有数据与新消息
  const updatedData = { ...this.hotelDataSubject.value, ...message };
  this.hotelDataSubject.next(updatedData);
}

步骤3：模板中使用async管道 #

<!-- 绑定Observable属性 -->
<div>{{ (hotelData$ | async)?.hotelName }}</div>
<div>{{ (hotelData$ | async)?.roomCount }}</div>

3. 手动触发变更检测（组件未销毁前提下） #

注入ChangeDetectorRef，在更新数据后手动标记变更，适合组件使用OnPush变更检测策略的场景：

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

// 构造函数注入ChangeDetectorRef
constructor(private cdr: ChangeDetectorRef, private signalRService: HotelSignalrService) {}

private updateHotelDetails(message: any) {
  // 更新hotelData
  Object.assign(this.hotelData, message);
  // 标记需要检测变更
  this.cdr.markForCheck();
  // 若组件是OnPush模式，直接触发检测
  // this.cdr.detectChanges();
}

4. 优化SignalR服务为Observable风格 #

将现有回调式的getHotelDetails改为返回Observable，更贴合Angular响应式编程，也便于后续配合变更检测：

修改HotelSignalrService #

import { Observable } from 'rxjs';

public getHotelDetails(): Observable<any> {
  return new Observable((observer) => {
    this.hubConnection.off('SendHotelDetails');
    const handler = (message: any) => {
      observer.next(message);
    };
    this.hubConnection.on('SendHotelDetails', handler);
    // 订阅取消时自动移除监听，避免内存泄漏
    return () => {
      this.hubConnection.off('SendHotelDetails', handler);
    };
  });
}

订阅使用 #

public startHotelConnection(hotelId: number, hotelData: HotelData) {
  this.signalRService.connectToGroup(hotelId.toString());
  this.hotelData= hotelData;

  this.signalRService.getHotelDetails().subscribe((message) => {
    this.updateHotelDetails(message);
  });
}

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