Обновление отображения товаров в корзине с помощью объекта / наблюдаемого - PullRequest
Новая
       25

Обновление отображения товаров в корзине с помощью объекта / наблюдаемого

0 голосов
/ 03 мая 2019

Я создаю приложение, в котором пользователь добавляет элемент в корзину, а затем отслеживает эти элементы в локальном хранилище. Когда пользователь нажимает кнопку «Добавить» в одном компоненте, мне нужно, чтобы панель навигации обновлялась с количеством элементов в реальном времени, но я не могу использовать Event Emitter с тем, как настроено мое приложение.

Функциональность, которую я ищу, проста: когда я добавляю элемент и он помещается в локальное хранилище, число в моей панели навигации рядом с логотипом корзины покупок должно увеличиться на 1. Я знаю, что это можно сделать с помощью Observables и Темы, мне просто трудно понять это. Я переместил код из компонента в службу, чтобы начать, потому что я думаю, что это позволит обоим компонентам взаимодействовать с ним. Я могу добавить элементы в локальное хранилище должным образом, используя службу, но я застрял после этого, когда мне нужно отслеживать количество элементов, добавленных с помощью службы.

Вот услуга: 

@Injectable({
  providedIn: 'root'
})
export class MenuService {
  public apiRoot: string = `http://localhost:3000`;
  orders;

  constructor(private http: HttpClient) { }

  order(id, name, options, price) {
    //confirm the order is correct
    const orderConfirmed = confirm("Add this item to your cart?");

    if (orderConfirmed) {
    let order = new Order(id, name, options, price)   

    //get and set any existing orders from local storage or set to a blank array if there are none
    this.orders = localStorage.getItem('order') ? JSON.parse(localStorage.getItem('order')) : [];

    //push to our orders array
    this.orders.push(order)

    //store in localStorage
    localStorage.setItem('order', JSON.stringify(this.orders)) 
    }
  }

Тогда вот мой navbar.ts: 

export class NavbarComponent implements OnInit {
  itemsInCart;
  constructor() { }

  getItemsInCart() {
    this.itemsInCart = JSON.parse(localStorage.getItem('order'))
  }

  ngOnInit() {
    this.getItemsInCart();
  }

}

Прямо сейчас я просто извлекаю элементы прямо из локального хранилища и отображаю их, но, очевидно, это не сработает в режиме реального времени, если я добавлю другие элементы, в основном я хочу создать компонент navbar, который находится над router-outlet, чтобы иметь возможность подписаться на свойство this.orders в MenuService, чтобы я мог отслеживать длину this.orders в режиме реального времени, когда пользователь добавляет товары в корзину. Извините, если это кажется очевидным, все еще учусь!

Ответы [ 2 ]

0 голосов
/ 03 мая 2019

Добавьте тему к вашей услуге, назовите ее в методе заказа и подпишитесь на нее в компоненте yur

storage.service.ts 

orders
ordersChanged = new Subject<any>()

order(){
   //your code
   this.ordersChanged.next(this.orders)
    }

component.ts 

itemsInCart

constructor(private storageService: StorageService){}

ngOnInit(){
   this.storageService.ordersChanged.subscribe(items => itemsInCart = items)
}
0 голосов
/ 03 мая 2019

не используйте хранилище localstorage в памяти, вместо этого таким образом, когда вы закрываете вкладку браузера или обновляете данные, удаляются (уровень эксперта, вы должны использовать Ngrx Store)

отметьте несвязанные компоненты: обмен данными со службой здесь

storage.service.ts 

export class StorageService {
  private foo: String;
  public fooChanged$: EventEmitter<any>; // For Communication between components
  constructor() {
    this.fooChanged$ = new EventEmitter(); // For Communication between components 
  }

  public emitFooChange(): void {// For Communication between components
    this.fooChanged$.emit();
  }

  setFoo(data: String) {
    this.foo = data;
  }

  getFoo(): Number {
    return this.foo;
  }
}

component.ts 

constructor(private storageService: StorageService){}
ngOnInit(){
  this.storageService.setFoo("Foo");
  console.log('foo', this.storageService.getFoo());
}
...