如何灵活且易于测试地使用Angular OnPush变更检测？

Great question! Let’s break this down to clarify how to use Angular’s OnPush change detection effectively, address your concerns about the two approaches you’ve found, and cover other useful methods you might not have come across yet.

1. Using Observables/Subjects Directly in Templates (Yes, This Works!) #

First off, that first approach you mentioned—binding to a Subject’s Observable in your template with the async pipe—is fully valid and actually one of Angular’s recommended practices. Here’s why it works seamlessly with OnPush:

The async pipe does two key things for you:

• It subscribes to the Observable automatically (and cleans up the subscription when the component is destroyed, preventing memory leaks).
• Every time the Observable emits a new value, the pipe calls ChangeDetectorRef.markForCheck() under the hood. This tells Angular to include your OnPush component in the next change detection cycle, even if none of its input references changed.

Example usage:

// Component
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { MyDataService } from './my-data.service';

@Component({
  selector: 'app-my-component',
  template: `<div>{{ data$ | async }}</div>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  data$ = this.dataService.dataSubject.asObservable();

  constructor(private dataService: MyDataService) {}
}

This approach keeps your component lean, avoids manual change detection work, and makes testing simpler—you can easily mock the service’s Observable to emit test values and verify the template updates.

2. Immutable Data Structures (Including Beyond Lists!) #

You’re correct that Immutable.js shines with lists, but it’s absolutely flexible enough for object scenarios too. Immutable.js provides methods like set(), merge(), and update() that let you modify data while returning a new reference (instead of mutating the original object). This is perfect for OnPush, since it relies on reference changes to trigger updates.

If you don’t want to add a third-party library, you can achieve the same effect with vanilla JavaScript using spread operators or array methods that return new arrays:

• For objects: const updatedUser = {...originalUser, name: 'New Name'};
• For arrays: const updatedList = [...originalList, newItem]; or const updatedList = originalList.map(item => item.id === 1 ? {...item, value: 'Updated'} : item);

The flexibility here is high—you’re not locked into Immutable.js, and vanilla immutable patterns are lightweight and easy to test (since you can compare references to confirm updates).

Other OnPush Implementation Methods You Might Miss #

Manual Change Detection Triggers #

Sometimes you’ll need to manually tell Angular to check for changes—for example, if you’re updating component state inside a subscription that doesn’t use the async pipe, or working with a third-party library that modifies the DOM directly.

You can inject ChangeDetectorRef and use its methods:

import { Component, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-manual-cd',
  template: `<div>{{ localState }}</div>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ManualCdComponent {
  localState = 'Initial Value';

  constructor(private cdr: ChangeDetectorRef) {}

  updateState() {
    this.localState = 'Updated Value';
    // Tell Angular to check this component in the next cycle
    this.cdr.markForCheck();
  }
}

Use markForCheck() to mark the component and its ancestors for check, or detectChanges() to run change detection immediately on the component and its children.

Angular Signals (v16+) #

If you’re using Angular 16 or later, Signals are a game-changer for OnPush components. Signals are reactive values that automatically track their dependencies, and when a signal’s value changes, Angular will trigger change detection only for the components that depend on that signal—even in OnPush mode.

Example with Signals:

import { Component, signal, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-signal-example',
  template: `<div>{{ user().name }}</div>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SignalExampleComponent {
  user = signal({ name: 'John Doe' });

  updateUserName() {
    // Update the signal with a new object (immutable update)
    this.user.set({...this.user(), name: 'Jane Doe'});
    // No need to call markForCheck()—Angular handles it automatically!
  }
}

Signals are lightweight, intuitive, and make testing even easier since you can directly set signal values in tests without mocking Observables.

Which Approach Should You Choose? #

• Observable + async pipe: Best for shared data streams (e.g., service-level state).
• Immutable updates (vanilla or Immutable.js): Great for component-level state or when working with state management libraries like NgRx.
• Manual CD triggers: Use sparingly for edge cases where other methods don’t apply.
• Signals: The modern, recommended approach for most reactive state scenarios in Angular 16+.

All these methods keep your OnPush components efficient and make testing simpler—since you’re either relying on predictable reference changes or reactive streams that are easy to mock.

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