如何在整个应用程序中保持数据同步？答案

【问题标题】：How to keep your data in sync throughout your application?如何在整个应用程序中保持数据同步？
【发布时间】：2018-06-23 21:44:03
【问题描述】：

我有许多组件显示服务提供的单个或多个产品。

getProducts() {
    return this.http.get('/api/products');
}

getProduct(id) {
    return this.http.get('/api/product/'+id);
}

在某些组件中，我可以使用此服务添加新产品或对其进行编辑。

saveProduct(product) {
    if(product._id) {
        return this.http.put('/api/product/'+product._id, product);
    }

    return this.http.post('/api/product', product);
}

这些组件同时显示，但不直接相互连接。因此，每当发生更改时，我都需要通知所有其他组件有关此更改。

我认为 observables 是要走的路，但我不知道如何开始。

在整个应用程序中维护数据的正确方法是什么？

【问题讨论】：

我的应用程序也是一个购物车。在我的应用程序中，所有 CRUD 操作都在 main.js 中完成。我使用 Even Emitter 在购物车中添加和删除产品。这会在不重新加载应用程序的情况下更新总项目、总价格。如果你使用了很多可重用的组件，我建议你使用 resolve。我希望这会有所帮助。

标签： angular typescript observable

【解决方案1】：

如果您的目标是多播数据，请使用 RXJS 的 Subject 或 BehaviorSubject Subject 充当源 Observable 和许多 observers 之间的桥梁/代理，使多个 observers 可以共享相同的 Observable 执行。

BehaviorSubject 相对于Subject 的优势

订阅时总是返回当前值 - 无需调用 onnext().
它有一个getValue() 函数来提取最后一个值作为原始数据。
它确保组件始终接收最新数据。
您可以使用asobservable() 从行为主题中获取可观察的信息 BehaviorSubject 上的方法。
Subject vs BehaviorSubject

服务

private firstResponse=new BehaviorSubject<any>('');
 private secondResponse=new BehaviorSubject<any>('');
      CurrentDatafirst = this.firstResponse.asObservable();
      CurrentDatasecond = this.secondResponse.asObservable();

   getProducts() {
    return this.http.get('/api/products').
      subscribe(result=>this.firstResponse.next(result));//push data into observable
}

getProduct(id) {
    return this.http.get('/api/product/'+id).
           subscribe(result=>this.secondResponse.next(result));//push data into observable
}

组件1：

ngOnInit()
{
  this.CurrentDatafirst.subscribe(//value=>your logic);
  this.CurrentDatasecond.subscribe(//value=>your logic)

}

组件2：

 ngOnInit()
    {
      this.CurrentDatafirst.subscribe(//value=>your logic);
      this.CurrentDatasecond.subscribe(//value=>your logic)

    }

【讨论】：

嗨，如果提供的答案或任何答案已经解决了您的问题，请考虑通过单击复选标记接受它。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。没有义务这样做:)
很好的答案，我将来肯定会使用这种技术。但我想我会为我当前的用例选择ngrx。

【解决方案2】：

您正在寻找的是一家商店。最著名的是Redux，几乎在每个 React 应用程序中都有使用。 Angular 有自己的替代方案，基于 Redux，称为 ngrx store。

【讨论】：