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

#angular #routing #components

#angular #маршруты #Компоненты

Вопрос:

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

Вы можете получить полную идею с помощью https://stackblitz.com/edit/angulaar-tvcart-nedabx?file=src/app/cart/cart.component.ts

Заранее спасибо ..!!

1. Почему вы хотите использовать маршрутизацию (например, с параметром запроса), а не сервис?

2. я использую сервис .. но для этого понадобится маршрутизатор также na??

3. @Wandrille вы можете получить полную идею, открыв эту ссылку .. пока, например, я просто рассматриваю раздел мобильных устройств .. как только это будет сделано, я применю то же самое и к двум другим.

4. чтобы вам было проще понять … мне просто нужно передать данные в AuthService при нажатии кнопки добавить .. и после этого нужно поместить эти данные в ArrayList в AuthService и отобразить их .. но я не могу передать это data..to AuthService.. надеюсь, вы это понимаете..

Ответ №1:

Это немного запутанно, но вы можете расставить точки над этим:

в вашем .html используйте функцию добавления (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()
}