Angular文本游戏应用中如何结合服务数据使用ChangeDetectionStrategy.OnPush？

搞定OnPush + SignalR + 数据服务的组合确实需要一些针对性的调整，我来分享几个实战中验证过的方案，帮你把不可变数据和变更检测的原则落地到你的Angular文本游戏里。

首先得明确，OnPush组件只会在以下情况触发变更检测：

• 组件的@Input()属性引用发生变化（不是属性内部值变化）
• 组件内部的可观察对象（用async管道）或Signal发出新值
• 手动调用ChangeDetectorRef.markForCheck()
• 组件触发了DOM事件（比如点击）

所以核心就是：所有数据更新都要产生新的引用，同时让组件能感知到这些新引用的变化。

你的SignalR推送是数据更新的源头，所以服务层是确保不可变的关键。这里分两种主流方案：BehaviorSubject + 不可变操作，或者Angular 16+的Signal。

方案A：BehaviorSubject + 不可变操作 #

用BehaviorSubject存储数据状态，每次SignalR收到消息时，生成新的数组/对象并next出去：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { HubConnection } from '@microsoft/signalr';
import { Hangar } from './hangar.model';

@Injectable({ providedIn: 'root' })
export class HangarService {
  // 私有Subject存储状态，对外暴露只读的Observable
  private _hangars = new BehaviorSubject<Hangar[]>([]);
  public hangars$: Observable<Hangar[]> = this._hangars.asObservable();

  constructor(private hubConnection: HubConnection) {
    // 订阅SignalR的Hangar更新事件
    this.hubConnection.on('HangarUpdated', (updatedHangar: Hangar) => {
      const currentState = this._hangars.value;
      // 生成新数组：替换更新的hangar，其余保持不变
      const newState = currentState.map(hangar => 
        hangar.id === updatedHangar.id ? { ...updatedHangar } : hangar
      );
      // 推送新状态（新引用）
      this._hangars.next(newState);
    });

    // 同理处理HangarAdded事件
    this.hubConnection.on('HangarAdded', (newHangar: Hangar) => {
      const currentState = this._hangars.value;
      // 扩展运算符生成新数组
      const newState = [...currentState, newHangar];
      this._hangars.next(newState);
    });
  }
}

这里的关键是：永远不要直接修改currentState里的对象或数组，而是用map、扩展运算符...或者immer这类库生成新的引用。

方案B：Angular Signal（更简洁） #

如果用Angular 16+，Signal天生适配不可变模式，代码会更简洁：

import { Injectable, signal } from '@angular/core';
import { HubConnection } from '@microsoft/signalr';
import { Hangar } from './hangar.model';

@Injectable({ providedIn: 'root' })
export class HangarService {
  // 私有Signal存储状态，对外暴露只读版本
  private _hangars = signal<Hangar[]>([]);
  public hangars = this._hangars.asReadonly();

  constructor(private hubConnection: HubConnection) {
    this.hubConnection.on('HangarUpdated', (updatedHangar: Hangar) => {
      // update方法接收当前状态，返回新状态
      this._hangars.update(current => 
        current.map(h => h.id === updatedHangar.id ? { ...updatedHangar } : h)
      );
    });

    this.hubConnection.on('HangarAdded', (newHangar: Hangar) => {
      this._hangars.update(current => [...current, newHangar]);
    });
  }
}

Signal的update方法会自动处理状态的不可变更新，而且组件模板里直接调用就能追踪变化，不需要async管道。

组件只需要做两件事：设置OnPush策略，然后正确订阅服务的数据。

用BehaviorSubject的组件示例 #

import { Component, ChangeDetectionStrategy } from '@angular/core';
import { HangarService } from './hangar.service';
import { Observable } from 'rxjs';
import { Hangar } from './hangar.model';

@Component({
  selector: 'app-hangar-view',
  template: `
    <div class="hangar-item" *ngFor="let hangar of hangars$ | async">
      <h3>{{ hangar.name }}</h3>
      <p>{{ hangar.description }}</p>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush // 开启OnPush
})
export class HangarViewComponent {
  hangars$: Observable<Hangar[]> = this.hangarService.hangars$;

  constructor(private hangarService: HangarService) {}
}

这里的async管道会自动订阅Observable，并且当新值（新引用）到来时，触发组件的变更检测——完美适配OnPush。

用Signal的组件示例 #

import { Component, ChangeDetectionStrategy } from '@angular/core';
import { HangarService } from './hangar.service';
import { Hangar } from './hangar.model';

@Component({
  selector: 'app-hangar-view',
  template: `
    <div class="hangar-item" *ngFor="let hangar of hangarService.hangars()">
      <h3>{{ hangar.name }}</h3>
      <p>{{ hangar.description }}</p>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HangarViewComponent {
  constructor(public hangarService: HangarService) {} // 公开服务供模板使用
}

Signal在模板中调用时，Angular会自动追踪其变化，一旦Signal更新，组件会自动触发变更检测，完全不需要手动处理。

• 不要直接修改对象属性：比如currentHangar.name = "New Name"这种操作不会触发OnPush的变更检测，因为引用没变化。一定要生成新对象：const updatedHangar = {...currentHangar, name: "New Name"}。
• 避免手动调用markForCheck：除非是处理第三方库的回调（比如某些非Angular的DOM操作），否则尽量依赖async管道或Signal自动触发变更检测。
• 用immer简化复杂状态更新：如果你的数据结构比较复杂（比如嵌套对象），手动写扩展运算符会很麻烦，可以用immer库的produce函数，它允许你“修改”状态，但实际返回的是新引用：

  import produce from 'immer';
  
  const newState = produce(currentState, draft => {
    const hangar = draft.find(h => h.id === updatedHangar.id);
    if (hangar) {
      hangar.name = updatedHangar.name;
      hangar.capacity = updatedHangar.capacity;
    }
  });
  

这样一套下来，你的OnPush策略就能完美落地，既保证了SignalR实时交互的响应性，又能获得OnPush带来的性能提升。

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