Angular 14 从不相关的组件获取数据答案

【问题标题】：Anguler 14 get data from unrelated componentAngular 14 从不相关的组件获取数据
【发布时间】：2023-01-19 20:20:12
【问题描述】：

我需要帮助来理解组件之间的数据共享......我有一个项目有一个购物车页面和一个页脚，它是一个独立的组件并且包含在我的应用程序的每个页面中......在页脚中我有一个购物车图标和在该图标上，我试图显示购物车中的商品数量...我从 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 但我不确定它在我的案例中的实现......

非常感谢你：）

【问题讨论】：

标签： javascript angular typescript ionic-framework

【解决方案1】：

利用行为主体.在不相关的组件之间共享数据是角度最简单的方法。

https://www.infragistics.com/community/blogs/b/infragistics/posts/simplest-way-to-share-data-between-two-unrelated-components-in-angular

https://medium.com/codex/how-to-share-data-between-components-in-angular-a-shopping-cart-example-b86ce8254965

【讨论】：

谢谢你，我一直在看 BehaviorSubject ......虽然我想我不知道如何在我的案例中正确实施它，但我会阅读它。谢谢
别客气。

【解决方案2】：

您可以使用 @Output 装饰页面组件，使用 @Input 装饰页脚。见this page on angular.io

【讨论】：

你能举个例子吗？我不太确定如何正确实施行为主题
我只有一个荷兰语的例子。但是 this blog 似乎很好地描述了工作原理。