繁体   English   中英

Angular 14 从无关组件获取数据

[英]Angular 14 get data from unrelated component

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

非常感谢你:)

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

①如果本文未解决您的问题,请点击查看与本文相关的问题
②如果本文未解决您的问题,请向程序员专用AI小助手提问
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM