Angular 14 从无关组件获取数据

Question

我需要帮助来理解组件之间的数据共享......我有一个项目有一个购物车页面和一个页脚，它是一个独立的组件并且包含在我的应用程序的每个页面中......在页脚中我有一个购物车图标和在该图标上，我试图显示购物车中的商品数量...我从 API 获取购物车中商品的数据...我是否必须将此 api 及其在页脚组件中的所有数据称为与购物车页面中的 function 相同，还是有使用更少代码的更短更简单的方法？

在下图中，您可以看到这个页脚组件（注意：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 但我不确定它在我的案例中的实现......

非常感谢你：）

Answer 1

使用行为主题。 在 angular 中，在不相关的组件之间共享数据是最简单的方法。

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

Answer 2

您可以使用@Input装饰页面组件，使用@Output装饰页脚。 在 angular.io 上查看此页面