Angular购物车-本地存储服务并订阅更改

Question

我在解决通过购物车服务通过本地存储监视购物车更改的问题时遇到很多麻烦。我如何订阅所做的更改，例如添加数量或删除项目，以便页面在事件发生时显示新数据？

当我的其他方法对localStorage进行更改时，是否有一种方法可以持续监视localStorage并更新我的getItems（）？

整天我的头脑有点迟钝，任何帮助都很棒！

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

您可以为此使用rxjs主题：

为您服务：

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

Answer 2

根据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);
});

但是如果我是你，我会跟踪单例服务中的项目https://angular.io/guide/singleton-services