javascript - 通过共享服务在两个组件之间进行 Angular 2/4 通信

Question

我正在尝试构建一个简单的购物车应用程序。 我有两个组件和一个购物车服务，如下所示。

<app-header></app-header>

<app-cart></app-cart> 

购物车服务具有将商品添加到购物车、删除购物车中的商品、购物车数量等的所有功能。

当用户将产品添加到购物车时，我需要更新 header 组件中的购物车计数。

如何使用共享服务来做到这一点。

Answer 1

在这种情况下，您可以使用带有主题的服务。 Angular 中的服务是单例的，这意味着它作为单个实例进行管理。因此，如果每个组件都访问该服务，它们将访问相同的共享数据。

export class cartService{
    private prodCount = 0;
    prodCountCountChange: Subject<number> = new Subject<number>();
    UpdateCount(count: number) {
        this.prodCount = count;
        this.prodCountCountChange.next(this.prodCount);
    }
}

在你的组件中你可以这样做，

  this._cartService.UpdateCount(this.prod.length);