Question

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

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

完整了解

提前谢谢.. !!

Answer 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()
}

如何使用角形工艺将产品添加到购物车？

1 个答案: