Question

在下面的代码中，CartService类有一个Cart类。通过addToCart（）函数存储在购物车中的CartItem将显示在控制台上，以显示此功能有效。

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

export class CartItem {

  constructor(private product: Product, private quantity: number) { }

  public increaseQuantity() {
    this.quantity++;
  }

  public getProduct(): Product {
    return this.product;
  }
}

export class Cart {
  private cartItems: CartItem[] = [];
  private numberOfItems = 0;

  public addToCart(newProduct: Product) {
    let existingItem: CartItem = this.findProduct(newProduct._id);

if (existingItem) {
  existingItem.increaseQuantity();
} else {
  this.cartItems.push(new CartItem(newProduct, 1));
  this.numberOfItems++;
}
    console.log('Cart.cartItems = ', this.cartItems);
  }

  public getNumberOfItems(): number {
    return this.cartItems.length;
  }

  private findProduct(id): CartItem {
    for (let item of this.cartItems) {
      if (item.getProduct()._id == id) {
        return item;
      }
    }
    return null;
  }

  public getCartItems() {
    console.log('Cart.before return cartItems', this.cartItems)
    return this.cartItems;
  }
}

@Injectable()
export class CartService {
  private cart: Cart = new Cart();

  constructor() { }

  public addToCart(product:Product) {
    this.cart.addToCart(product);
  }

  public getNumberOfItems(): number {
    return this.cart.getNumberOfItems();
  }

  public getCartItems() {
    return this.cart.getCartItems();
  }
}

问题出现在下面显示的CartComponent类中，当检索Cart类的CartItem时，它们在购物车中没有显示任何项目。不知何故，上面代码中存储在购物车中的商品消失了。

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

  constructor(private cartService:CartService) { }

  ngOnInit() {
    this.cartItems = this.cartService.getCartItems();
    console.log('CartComponent.cartItems', JSON.stringify(this.cartItems))
  }

}

Answer 1

我怀疑原因是您在CartComponent上提供服务。当组件被销毁并重新创建时，会创建一个新的服务实例。

而是在AppModule上提供

@NgModule({
  providers: [CartService, ...]
})
export class AppModule {}

获取与Angular应用程序具有相同生命周期的应用程序范围的单例。

Angular 2 - 服务无法维护数据

1 个答案: