如何使用服务在两个组件之间同步数据

Question

我有两个要与之同步数据的组件。

来自user / product / product.component.ts

至user / carts / carts.component.ts

在产品组件中，我正在从Firebase接收有关产品价格的数据

totalPrice;

addToCart(item, counter, totalPrice){
    this.totalPrice = this.myDocData.price * counter;
   this._backendService._fincartPriceSource.next(this.totalPrice);
}

上述功能使价格按照柜台编号增加价格，然后将其发送给服务

这是我的服务代码

_fincartPriceSource = new Subject<any>();

这是我的购物车代码

export class CartsComponent implements OnInit {
  cartprice="0";

  constructor(private _backendservice: BackendService) { 

  }

  ngOnInit() {
    this._backendservice._fincartPriceSource.subscribe(totalPrice => {
      this.cartprice = totalPrice;
    })
  }
}

我可以在Oninit中进行控制台记录，并显示结果，但是当我在cart.component.html文件中使用它时，结果却没有。

这是我的cart.component.html代码，在其中使用“购物车价格”变量

<h2>Checkout Page {{ cartprice }}</h2>

任何帮助将不胜感激。

Answer 1

您的组件可能正在使用同一服务的不同实例。在app.module.ts中注册您的服务，以便它们使用相同的服务实例。