以下是一个使用Angular的购物车应用的示例,其中包含本地存储服务和订阅更改的解决方法:
cart.service.ts
的服务文件,用于处理购物车数据的存储和操作:import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class CartService {
private cartItems: any[] = [];
private cartSubject = new BehaviorSubject(this.cartItems);
constructor() {
// 从本地存储中获取购物车数据(如果存在)
const storedCartItems = localStorage.getItem('cartItems');
if (storedCartItems) {
this.cartItems = JSON.parse(storedCartItems);
this.cartSubject.next(this.cartItems);
}
}
getCartItems() {
return this.cartSubject.asObservable();
}
addToCart(item: any) {
this.cartItems.push(item);
this.cartSubject.next(this.cartItems);
this.updateLocalStorage();
}
removeFromCart(item: any) {
const index = this.cartItems.findIndex(i => i.id === item.id);
if (index !== -1) {
this.cartItems.splice(index, 1);
this.cartSubject.next(this.cartItems);
this.updateLocalStorage();
}
}
clearCart() {
this.cartItems = [];
this.cartSubject.next(this.cartItems);
this.updateLocalStorage();
}
private updateLocalStorage() {
localStorage.setItem('cartItems', JSON.stringify(this.cartItems));
}
}
cart.component.ts
的组件文件,用于显示购物车数据和操作:import { Component, OnInit } from '@angular/core';
import { CartService } from './cart.service';
@Component({
selector: 'app-cart',
template: `
购物车
- {{ item.name }} - {{ item.price }}
`
})
export class CartComponent implements OnInit {
cartItems: any[] = [];
constructor(private cartService: CartService) {}
ngOnInit() {
// 订阅购物车数据的变化
this.cartService.getCartItems().subscribe(items => {
this.cartItems = items;
});
}
clearCart() {
this.cartService.clearCart();
}
}
CartService
并使用它来添加、删除和获取购物车数据:import { Component } from '@angular/core';
import { CartService } from './cart.service';
@Component({
selector: 'app-product',
template: `
产品列表
-
{{ product.name }} - {{ product.price }}
`
})
export class ProductComponent {
products = [
{ id: 1, name: '商品1', price: 10 },
{ id: 2, name: '商品2', price: 20 },
{ id: 3, name: '商品3', price: 30 }
];
constructor(private cartService: CartService) {}
addToCart(product: any) {
this.cartService.addToCart(product);
}
}
在上述示例中,CartService
使用BehaviorSubject
来创建一个可观察的购物车数据流,以便在购物车数据发生变化时通知订阅者。购物车数据存储在本地存储中,以便在刷新页面或重新加载应用时保持数据的持久性。
购物车组件通过订阅CartService
提供的购物车数据流来获取购物车数据,并在数据变化时更新视图。通过调用CartService
的方法来添加、删除和清空购物车。