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

【问题标题】：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.. 希望你能得到它..

标签： angular routing components

【解决方案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()
}

【讨论】：

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