Angular服务内如何监听对象/数组的变化？

Great question! Since Angular services don’t have access to component lifecycle hooks like DoCheck, we need to get a bit creative to track changes to objects or arrays in a service. Here are three reliable, production-ready approaches you can use:

1. Use RxJS Subjects (BehaviorSubject) for Reactive Updates #

This is the most Angular-idiomatic approach, leveraging the framework's built-in reactive patterns. By wrapping your data in a BehaviorSubject, you can emit updates whenever the data changes, and let subscribers (components or other services) react to those changes.

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DataService {
  // Hold the current state of your data
  private dataSubject = new BehaviorSubject<{ name: string; age: number }>({ name: 'John', age: 30 });
  // Expose an observable for subscribers to listen to
  public data$ = this.dataSubject.asObservable();

  // Method to update data (triggers change emission)
  updateData(newData: Partial<{ name: string; age: number }>) {
    // Create a new object to ensure immutability (critical for change detection)
    const updatedData = { ...this.dataSubject.value, ...newData };
    this.dataSubject.next(updatedData);
  }

  // Handle nested property updates correctly
  updateNestedAddress(city: string) {
    const currentData = this.dataSubject.value;
    // Always return a new reference for nested objects
    const updatedData = {
      ...currentData,
      address: { ...currentData.address, city }
    };
    this.dataSubject.next(updatedData);
  }
}

How to use it: #

Subscribe to data$ in your components or other services to react to changes automatically. This approach enforces immutable data practices and plays nicely with Angular's change detection system.

2. Manual Change Detection with KeyValueDiffers/IterableDiffers #

If you need granular change details (like knowing exactly which property was added, changed, or removed), you can use the same KeyValueDiffers/IterableDiffers utilities you use in components—you just have to trigger the check manually.

import { Injectable, KeyValueDiffers, KeyValueDiffer } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class DataService {
  private data: { [key: string]: any } = { name: 'John', age: 30 };
  private differ: KeyValueDiffer<string, any> | null = null;

  constructor(private differs: KeyValueDiffers) {
    // Initialize the differ with your initial data
    this.differ = this.differs.find(this.data).create();
  }

  // Update data and trigger change check
  updateData(newData: Partial<{ name: string; age: number }>) {
    Object.assign(this.data, newData);
    this.checkForChanges();
  }

  private checkForChanges() {
    if (!this.differ) return;

    const changes = this.differ.diff(this.data);
    if (changes) {
      // Handle specific change types
      changes.forEachAddedItem(r => console.log(`Added property: ${r.key} = ${r.currentValue}`));
      changes.forEachChangedItem(r => console.log(`Changed property: ${r.key} (from ${r.previousValue} to ${r.currentValue})`));
      changes.forEachRemovedItem(r => console.log(`Removed property: ${r.key} = ${r.previousValue}`));
    }
  }

  // Optional: Auto-check for changes (use cautiously for performance)
  startAutoDetection(intervalMs = 1000) {
    setInterval(() => this.checkForChanges(), intervalMs);
  }
}

How to use it: #

Call updateData to modify your data, and the checkForChanges method will detect and report granular changes. For data modified outside your service methods, the auto-detection interval works but should be used sparingly to avoid performance hits.

3. Intercept Changes with ES6 Proxy #

For full control over every possible modification to your object/array, use an ES6 Proxy to intercept property sets, deletions, and even array mutator methods (like push or pop).

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

@Injectable({ providedIn: 'root' })
export class DataService {
  private _data: { name: string; age: number; hobbies: string[] } = {
    name: 'John',
    age: 30,
    hobbies: ['reading', 'hiking']
  };
  // Expose the proxied version of your data
  public data: typeof this._data;

  constructor() {
    this.data = new Proxy(this._data, {
      set: (target, prop, value) => {
        if (target[prop] !== value) {
          target[prop] = value;
          this.onDataChanged();
        }
        return true;
      },
      deleteProperty: (target, prop) => {
        delete target[prop];
        this.onDataChanged();
        return true;
      },
      get: (target, prop) => {
        // Wrap array mutator methods to trigger change detection
        if (Array.isArray(target) && typeof target[prop] === 'function') {
          if (['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].includes(prop as string)) {
            return (...args: any[]) => {
              const result = target[prop](...args);
              this.onDataChanged();
              return result;
            };
          }
        }
        return target[prop];
      }
    });
  }

  private onDataChanged() {
    console.log('Data modified!');
    // Add your custom logic here: notify subscribers, update state, etc.
  }
}

How to use it: #

Modify data directly (e.g., data.name = 'Jane' or data.hobbies.push('cooking'))—every change will trigger the onDataChanged method automatically.

Which Approach Should You Choose? #

• RxJS Subjects: The best default choice. It’s reactive, aligns with Angular’s patterns, and works seamlessly with components.
• Differs: Perfect when you need precise change details (like tracking individual property updates).
• Proxy: Ideal for scenarios where you need to catch all modifications, even when changes are made directly to properties or array methods.

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