Question

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

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);
}

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

我认为可观察的方法是可行的，但是我不确定如何开始。

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

Answer 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
}

Component1：

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

}

Component2：

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

    }

Answer 2

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

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

2 个答案: