Angular中Observable服务组件数据隔离问题：如何实现修改封装与主动同步

你的问题核心是所有组件共享了同一个对象引用，所以修改任意组件的_test属性会同步影响其他组件。要实现“仅调用setTest时才触发全局更新”的需求，深克隆是最直接有效的手段，这里有两种简单的实现方式，推荐优先在服务层统一处理：

方式一：在服务层返回克隆后的对象（推荐） #

修改testService的getTest方法，在返回Observable时通过map操作符对数据进行深克隆，这样每个组件订阅后拿到的都是独立的对象副本：

import { map } from 'rxjs/operators';

@Injectable() 
export class testService { 
  private testSubject = new BehaviorSubject<Test>(null); 
  
  constructor() { } 
  
  public setTest(test: Test) { 
    // 可选：如果传入的test也是外部引用对象，这里也可以克隆一次，避免外部修改直接影响Subject内的缓存
    const clonedTest = test ? JSON.parse(JSON.stringify(test)) : null;
    this.testSubject.next(clonedTest); 
  } 
  
  public getTest(): Observable<Test> { 
    return this.testSubject.asObservable().pipe(
      map(test => test ? JSON.parse(JSON.stringify(test)) : null)
    ); 
  } 
}

这样修改后：

• 每个组件的_test都是独立的副本，修改自身数据不会影响其他组件
• 只有当调用setTest传入新数据时，服务才会发射新的克隆对象，触发所有组件的订阅更新

注意：JSON.parse(JSON.stringify())是无依赖的简易深克隆方式，适合处理普通JSON结构的数据（无函数、undefined、循环引用的对象）。如果你的Test对象包含特殊类型，可以自定义深克隆函数，或者使用lodash.cloneDeep这类成熟工具库。

方式二：在组件订阅时克隆数据 #

如果不想修改服务代码，也可以在每个组件的订阅回调里对返回值进行深克隆：

this.testService.getTest()
  .takeUntil(this.unsubscribe)
  .subscribe(
    res => {
      // 克隆后再赋值给组件私有属性
      this._test = res ? JSON.parse(JSON.stringify(res)) : null;
    },
    err => {
      console.log(err);
    }
  );

这种方式需要修改所有四个组件的代码，维护性不如服务层统一处理，所以更推荐第一种方案。

总结：确实需要深克隆，最简单的实现就是在服务的getTest方法中添加克隆逻辑，一次性解决所有组件的引用共享问题。

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