javascript - 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');

并在组件内订阅它，您可以在生命周期 Hook 内订阅:

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