如何使用角度路由将产品添加到购物车？

Posted 2023-02-23

【中文标题】如何使用角度路由将产品添加到购物车？

【英文标题】：How to add product into cart using routing in angular?

【发布时间】：2019-08-06 05:59:27

【问题描述】：

我有 4 个子组件，其中 3 个有 arrayList，每个都有关于产品的一些细节，如品牌、型号和价格。现在我想将此产品添加到第四个组件中，即使用每个产品前面的添加按钮的购物车列表。为此，我需要使用路由。3 个组件的名称是 Mobile、Tv、Laptop。

您可以通过https://stackblitz.com/edit/angulaar-tvcart-nedabx?file=src%2Fapp%2Fcart%2Fcart.component.ts 了解整个想法

提前谢谢..!!

【问题讨论】：

为什么要使用路由（例如带有查询参数）而不是服务？

我正在使用服务..但是这样做还需要路由器吗？？

@Wandrille 您可以通过打开该链接来了解整个想法。例如，我正在考虑移动部分。一旦完成，我也会对其他两个部分应用相同的内容。跨度>

为了让你更容易理解......我只需要在按下添加按钮时将数据传递给 authService..然后需要将该数据推送到 authService 中的 arrayList 并显示它。 .但我无法将该数据传递给 authService.. 希望你能得到它..

【参考方案1】：

这有点乱，但你可以点这个：

在您的.html 中，单击时使用函数 add(c)。

<div class="col-4  bg-light ">c.brand</div>
<div class="col-4  ">c.model</div>
<div class="col-2 ">c.price</div>
<button class=" col-1 btn-primary" (click)="add(c)">ADD</button>

在您的 .component.ts 中，创建函数 add。

constructor(private cartService : CartService)

add(product)
   this.cartService.add(product)

为您服务cart.service.ts：

products = [];

add(product)
  this.products.push(product);


getProducts()
  return this.products

在你的cart.component.ts:

products=[];

constructor(private cartService : CartService)

ngOnInit()
  this.products = this.cartService.getProducts()

【讨论】：

谢谢！它确实进行了一些修改..但感谢您提供这个想法