我需要帮助来了解组件之间的数据共享...我有一个项目，它有一个购物车页面和一个页脚，页脚是一个独立的组件，包含在我的应用程序的每个页面中...在页脚中，我有一个购物车图标，我试图在该图标上显示购物车中的项目数量...我从API获取购物车中的项目数据...我是否必须在页脚组件中调用这个API和它的所有数据，函数与在购物车页面中调用的函数相同，或者是否有一个更短更简单的方法，使用更少的代码？
在下图中，您可以看到此页脚组件 （注：11目前已硬编码）：

以下是API响应购物车数据的外观：

{
    "total_products": 0,
    "totals": null,
    "notes": null,
    "shipping_method": null,
    "products": []
}

下面是cart.page.ts的代码，我用它来显示应用程序中的数据：

ngOnInit() {
    this.getCart();
  }

  getCart() {
    this.getCartSubscription = this.cartService.getCart().subscribe(
      (data: any) => {
        const productsData = data.body.products;
        const totalProducts = data.body.total_products;
        const totalCartPrice = data.body.totals;
        this.products = productsData.map(products => products);
        this.totalProducts = totalProducts;
        this.totalCartPrice = totalCartPrice;
        console.log('Products in cart:', data.body);
      },
      error => {
        console.log('Error', error);
      });
  }

如何在页脚组件中显示产品总数？
我的代码好吗？有什么方法可以优化它吗？这是我的第一个真实的的Angular 项目，我想尽可能正确地做到这一点：）

****编辑：**我已经阅读并尝试使用BehaviourSubject，但不确定它在我的情况下的实现...

非常感谢你们：）