Angular Корзина - Local Storage Service и подписка на изменения

Question

У меня много проблем с решением проблемы отслеживания изменений в моей корзине покупок через локальное хранилище с помощью службы корзины покупок. Как подписаться на изменения, сделанные, например, добавив кол-во или удалив элемент, чтобы на странице отображались новые данные по событию?

Есть ли способ постоянно отслеживать localStorage и обновлять мой getItems (), когда изменения сделаны из моих других методов в localStorage?

Мой разум немного медленен в этом весь день, любая помощь потрясающая!

CartComponent.ts ---

import { Component, OnInit } from '@angular/core';
import { CartService } from '../services/cart.service';
import { Products } from '../models/products';
import { Item } from '../models/item';


@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.css']
})
export class CartComponent implements OnInit {

  product: Products;
  public items: Item = new Item();
  item;

  constructor(private cartService: CartService) { }

  ngOnInit(): void {

    this.items = this.cartService.getItems();

    //this.items = this.cartService.getItems();
  }

  deleteItem(item){
    this.cartService.deleteItem(item);
    let domItem = document.getElementById(`cart-item`+item.product.id);
    setTimeout(() =>{
    domItem.classList.add('delete-style');
    domItem.parentNode.removeChild(domItem);
    },1000);

  }
  addQty(item){
    this.cartService.addQty(item);
  }
}

CartService.ts ---

import { Injectable } from '@angular/core';
import { Products } from '../models/products';
import { Item } from '../models/item';
import { Observable, of } from 'rxjs';
import { StorageService } from '../services/storage.service';


let itemsInCart = [];
let cart = [];
//console.log("itemsInCart: ", itemsInCart);
@Injectable({
  providedIn: 'root'
})
export class CartService {

  product: Products;
  items: Item;

  constructor() { }

  addToCart(product: Products) {
    let local_storage;
    let itemsInCart = []
    this.items = {
      product: product,
      quantity: 1,
    }
    if(localStorage.getItem('cart')  == null){
      local_storage =[];
      console.log("LOCALSTORAGE NULL",JSON.parse(localStorage.getItem('cart')));
      itemsInCart.push(this.items);
      localStorage.setItem('cart', JSON.stringify(itemsInCart));
      console.log('Pushed first Item: ', itemsInCart);
    }
    else
    {
      local_storage = JSON.parse(localStorage.getItem('cart'));
      console.log("LOCAL STORAGE HAS ITEMS",JSON.parse(localStorage.getItem('cart')));
      for(var i in local_storage)
      {
        console.log(local_storage[i].product.id);
        if(this.items.product.id == local_storage[i].product.id)
        {
          local_storage[i].quantity += 1;
          console.log("Quantity for "+i+" : "+ local_storage[i].quantity);
          console.log('same product! index is ', i); 
          this.items=null;
          break;  
        }
    }
    if(this.items){
      itemsInCart.push(this.items);
    }
    local_storage.forEach(function (item){
      itemsInCart.push(item);
    })
    localStorage.setItem('cart', JSON.stringify(itemsInCart));

    }
  }
  getItems(){
   console.log("Cart: ", JSON.parse(localStorage.getItem('cart')));
   return this.items = JSON.parse(localStorage.getItem('cart'));

   //return this.items = 
  }
  deleteItem(item){
    item = item;
    console.log("Deleting : ",item);
    let shopping_cart;
    let index;
    shopping_cart = JSON.parse(localStorage.getItem('cart'));
    for(let i in shopping_cart){
      if (item.product.name == shopping_cart[i].product.name)
      {
        index = i;
        console.log(index);
      }
    }
    shopping_cart.splice(index, 1);
    console.log("shopping_cart ", shopping_cart);
    localStorage.setItem('cart', JSON.stringify(shopping_cart));

  }
  addQty(item: Item)
  {
    item = item;
    let shopping_cart;
    shopping_cart = JSON.parse(localStorage.getItem('cart'));
    for(let i in shopping_cart){
      if(item.product.name == shopping_cart[i].product.name){
        shopping_cart[i].quantity +=1;
        item = null;
        break;
      }
    }
    localStorage.setItem('cart', JSON.stringify(shopping_cart));

  }
  numberOfItems(){
    let itemsInCart = JSON.parse(localStorage.getItem('cart'));
    return itemsInCart.length;
  }
  clearCart(){
    localStorage.clear();
  }
}

Answer 1

Согласно MDN есть событие, которое вы можете прослушать для

window.addEventListener('storage', function(e) {  
document.querySelector('.my-key').textContent = e.key;
document.querySelector('.my-old').textContent = e.oldValue;
document.querySelector('.my-new').textContent = e.newValue;
document.querySelector('.my-url').textContent = e.url;
document.querySelector('.my-storage').textContent = JSON.stringify(e.storageArea);
});

, но на вашем месте я бы отслеживал элементы внутри службы singleton https://angular.io/guide/singleton-services

Answer 2

Вы можете использовать rx js Темы для этого:

В вашем сервисе:

subject = new Subject<any>();

при обновлении значения, хранящегося в localStorage использовать .next

пример:

localStorage.setItem('cart', JSON.stringify(itemsInCart));
subject.next('changed');

и подписаться на него внутри своего компонента, вы можете подписаться внутри ловушки жизненного цикла:

ngOnInit() {
 this.cartService.subscribe((status) => {
  //..you will reach here when you use `.next` because this callback function gets 
  // executed
  this.items = this.cartService.getItems();
 })
}