Как добавить товар в корзину, используя угловую маршрутизацию?

Question

У меня есть 4 дочерних компонента, из которых 3 имеют arrayList, каждый из которых содержит мало деталей о продукте, таких как марка, модель и цена.Теперь я хочу добавить эти продукты в список 4-х компонентов iecart, используя кнопку добавления перед каждым продуктом.Для этого мне нужно использовать маршрутизацию. Наименование из 3-х компонентов: «Мобильный», «Телевизор», «Ноутбук».

Вы можете получить всю идею, набрав 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()
}