angular 服务中的数组在转到另一个页面时重置为零

Question

我遇到了奇怪的问题，我尝试创建购物车。我做到了 this guide。但就我而言，当我使用购物车组件时，我遇到了购物车重置为零的问题。这是我的代码：

import {Component, OnInit} from '@angular/core';
import {CartService} from "../../Services/CartService";
import {Product} from "../../Models/Product";
import {CartItem} from "../../Models/CartItem";

class Item {
  product: Product
  productAmount: number
}

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

  public productsInCart: CartItem[];

  constructor(private cartService: CartService) {
  }

  ngOnInit(): void {
    console.log(this.cartService.getProductsInCart().length)
    this.productsInCart = this.cartService.getProductsInCart();
  }

}

这里我得到 CartService

import {Product} from "../Models/Product";
import {Injectable} from "@angular/core";
import {CartItem} from "../Models/CartItem";

@Injectable()
export class CartService {
  private readonly productsInCart: CartItem[] = [];

  addToCart(product: Product, amount: number) {
    this.productsInCart.push(new CartItem(product,amount))
  }

  getProductsInCart() {
    return this.productsInCart;
  }

}

在另一个组件中，我有一个按钮可以将产品添加到我的购物车

<a class="btn btn-outline-success p-2" (click)="addProductToCart(product)"
         *ngIf="product.isAvailable == true" data-toggle="modal" data-target="#myModal">
        <i class="fas fa-shopping-cart"></i>Buy
      </a>

因此，当我单击此按钮时，产品添加到购物车并且一切正常，因为我登录到控制台购物车大小，但是当我尝试访问 CartComponent 时 - 我的数组变为空并且记录为零。有人能帮我吗？ Link do DEMO

Answer 1

你需要的是所谓的状态管理，以了解更多关于这个主题的信息我与您分享这些链接，以便更好地了解 angular:

中应用程序状态的这一面

angular-state-management

What is the application state? Theoretically, it is the entire memory of the application...

Answer 2

查看您的 working example 看来问题的一部分只是您的路由。您正在使用 href 和 <a>。当用户单击该“购物车商品”link 时，它会刷新整个 Angular 应用程序，擦除存储在 CartService 属性 productsInCart 上的已保存购物车商品.变化：

href="/cart"

至：

routerLink="cart"

您可以在此 forked example 中看到，通过进行简单的更改，您可以选择一些购物车商品，然后单击购物车 link 并看到添加的对象可用，因为应用程序不可用与 href 一样重新加载。您要确保使用 routerLink 而不是 href 在您的应用程序（定义的路线）内导航或使用 Router 或 Location 进行导航。

希望对您有所帮助！

angular 服务中的数组在转到另一个页面时重置为零

Array in angular service is reset to zero when go to the another page

typescript

angular-components

angular