时间戳

首页 > 解决方案 > 基于可观察的服务

angular - 基于可观察的服务

问题描述

我得到一个包含 4 个组件的视图。这 4 个组件订阅了一个服务，在该服务中它们获取了它们使用的更新对象。

这是服务：

@Injectable()
export class testService {

  private testSubject = new BehaviorSubject<Test>(null);

  constructor() { }

  public setTest(test: Test) {
    this.testSubject.next(test);
  }

  public getTest(): Observable<Test> {
    return this.testSubject.asObservable();
  }
}

组件订阅如下：

this.testService.getTest()
  .takeUntil(this.unsubscribe)
  .subscribe(
    res => {

      this._test = res;
    },
    err => {
      console.log(err);
    }
  );

问题是，当我在任何组件中更改 _test 的任何属性时，其他组件也会发生变化。我希望行为是更改被封装在该组件中，并通过在 testService 上调用 setTest 我触发他们视图中其他组件的订阅。因为现在看起来他们都在编辑同一个对象，因为服务返回了一个引用。

我怎样才能最容易地实现这种行为/模式？我应该深度克隆组件中服务的每个响应吗？

溴

标签： angularrxjs

解决方案

当然。这种行为是因为您使用的主题很热门，并且所有订阅者都会在它更改时收到通知。这是主体性质。

如果您只想影响一个组件，您有两种解决方案：1）使用 observable 而不是主题 2）或为每个组件创建一个服务（使用 @component.providers 属性），但这是一种非常糟糕的做法。

推荐阅读