Question

我有两个组件使用相同的服务来get（）和set（）项目到localStorage。一个组件集（）/＆＃39;添加＆＃39;物品到localStorage

import { Component, OnInit, Input } from '@angular/core';
import {Product} from '../product'; 
import { PRODUCTS } from '../mock-products'; 
import {CartService} from '../cart.service'; 

@Component({
  selector: 'app-cart-item',
  templateUrl: './cart-item.component.html',
  styleUrls: ['./cart-item.component.css']
})

export class CartItemComponent implements OnInit {
  @Input() cartItem: Product; 

  constructor(private cartService: CartService) { } 

  ngOnInit() { }


  addToCart() {  // adds item to localStorage

  this.closeModal();
  alert('item(s) successfully added to cart');


  const cart = [];
  const currentCart = this.cartService.get();
  if (currentCart != null && currentCart.length > 0) {
    for (let i = 0; i < currentCart.length; i++) {
      cart.push(currentCart[i]);
    }
  }

   cart.push(this.cartItem);
   this.cartService.set(cart);

 }
}

，另一个组件从localStorage中获取（）显示表中数据的数据。

import { Component, OnInit, Input, ChangeDetectionStrategy } from 
'@angular/core';
import { Product } from '../product'; // data types
import { PRODUCTS } from '../mock-products'; // database
import { CartService } from '../cart.service'; // service

@Component({
selector: 'app-checkout',
templateUrl: './checkout.component.html',
styleUrls: ['./checkout.component.css']
 })


 export class CheckoutComponent implements OnInit {
 shoppingCart: Product[]; 
 @Input() PRODUCTS: Product; 
 constructor(private cartService: CartService) {  this.shoppingCart = 
  this.cartService.get(); }

  ngOnInit() {}

  checkOut() {

  this.shoppingCart = this.cartService.get();
  console.log(this.shoppingCart); // service is working, changes are 
  not being reflected in HTML


  const span = document.getElementsByClassName('closeModal')[0];
  const modal = document.getElementById('shoppingCart'); // pulls up 
  modal
  modal.style.display = 'block';
   }

在同一个组件中，我可以通过运行以下命令对localStorage进行更改并查看实时更改：this.cartService.get（）

 deleteItem(id, shoppingCart) {
   const newCart = [];
   for (let i = 0; i < shoppingCart.length; i++) {
     if (shoppingCart[i].id !== id) {
       newCart.push(shoppingCart[i]);
     }
   }
this.cartService.set(newCart);
this.shoppingCart = this.cartService.get();
 }

}

我已记录控制台并且正在将新项目设置为localStorage，除非刷新，否则表格不会使用新数据进行更新。

以下是没有更新的HTML表格，它使用* ngFor来循环播放购物卡片＆＃39;并创建表：

<table id="shoppingCartTable" >
    <thead>
    <th> Item </th>
    <th> </th>
    <th> </th>
    <th> Price </th>
    <th> Quantity </th>
    <th> Total </th>
    <th> Delete? </th>
    <tr *ngFor="let cartItem of this.shoppingCart">
      <td>{{cartItem.productName}}</td>
      <td><img src={{cartItem.img}} /></td>
      <td>{{cartItem.description}}</td>
      <td>${{cartItem.price}}</td>
      <td>{{cartItem.quantity}}</td>
      <td>{{cartItem.price * cartItem.quantity}}</td>
      <td><button><img src="./assets/icons/trashcan.png" 
 (click)="deleteItem(cartItem.id, shoppingCart)" /></button></td>
  </tr>
    <tr>
     <button id="checkoutBtn"(click)="confirmCheckout()"> Checkout
     </button>
    </tr>

  </thead>

    <tbody id="tbodyCart"></tbody>
  </table>

这是我的服务：

import { Injectable } from '@angular/core';
import { Product } from './product'; // data model
import { PRODUCTS } from './mock-products'; // database +

@Injectable()
export class CartService {

 constructor() { }

 set(shoppingCart: Product[]) { 
   localStorage.setItem('shoppingCart', JSON.stringify(shoppingCart));
  }
 get() {
   return JSON.parse(localStorage.getItem('shoppingCart'));
   }


 }

我尝试使用默认的ChangeDetectionStrategy以及.OnPush，但都没有工作。我已经梳理了stackoverflow并阅读了有关RxJs可观察量的内容但是我们还没有能够应用/我不太了解它们是如何工作的，甚至不确定答案是什么。如何在不刷新的情况下让我的视图层从另一个组件响应localStorage中的更改？我是Angular的新手，想要一个Angular解决方案，但任何方向都会有所帮助！

Answer 1

尝试更改此内容：

 shoppingCart: Product[];

对此：

 get shoppingCart(): Product[] {
   this.cartService.get();
 };

然后，每次内置更改检测获取更改并重新评估绑定时，将调用getter并获取当前值。

我没有尝试使用本地存储的这种技术......但它在服务方面效果很好，所以也可以在这种情况下使用。

Answer 2

我不确定这是否是最好的方法，但在CartService中，在构造函数之前，您可以为BehaviorSubject类型添加名为'cart'的公共变量，如此...

cart: Subject<Product[]> = new BehaviorSubject<Product[]>(null);

然后您将更改cartService中的代码，以便每次更改shoppingCart内容时通过调用其“next”函数来更新其cart变量

this.cart.next(shoppingCart);

这将允许您“订阅”任何使用cartService的任何对cart变量所做的更改。例如，在CheckoutComponent的ngOnInit（）函数中，您可以编写

this.cartService.cart.subscribe((newCart) => { this.shoppingCart = newCart });

此代码的效果是每次通过cartService更新购物车的内容时，您“订阅”该购物车变量的所有地点都会更新。它有点间接，因为你没有直接订阅localStorage中的内容，而是负责处理那些localStorage内容的服务中的变量，但是应该这样做。我很想知道你是否找到了更直接的东西。

Angular组件视图层不使用localStorage更新而不刷新

2 个答案: