以下是一个使用Angular的购物车应用的示例，其中包含本地存储服务和订阅更改的解决方法：

1. 首先，创建一个名为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));
  }
}

2. 创建一个名为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();
  }
}

3. 在需要使用购物车功能的其他组件中，导入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的方法来添加、删除和清空购物车。