Angular 16 RxJs 问题更新标头组件总计

Question

您好，我有一个关于我的 Observable 的问题。

我有一个购物车以及结账功能，当我向购物车添加其他商品时，结账功能正常 它处理总项目和总成本。这些组件是购物车文件夹层次结构中的兄弟组件，我提到这一点是因为我不确定这是否是我在重新加载后才得到正确总数的原因。我的购物车旁边有一个图像，仅当我重新加载时添加到购物车时，该图像不会更新总商品。

像这样：

它位于标题组件中，该组件位于层次结构中名为 UI 的完全不同的文件夹中。 到目前为止我尝试过的方法并没有解决我的问题，我已经接近解决问题了，但还没有钱。理解这一点将帮助我找出标头组件中的其他更新，例如用户登录名，而无需重新加载。 通过订阅为我指明正确的方向将不胜感激。包含标头组件的代码片段：

header.component.ts

   Component({
     providers:[NgbModal, NgbModalConfig, ProductItemComponent, ProductListComponent, 
     CartItemComponent, EventEmitter, CartComponent, WishlistListComponent], 
     //NgbModal is a service for mpodal dialog
     selector: 'app-header',
     templateUrl: './header.component.html',
     styleUrls: ['./header.component.scss']
  })

     constructor( private msg: MessengerService, private 
     cartService:CartService,private accountService: AccountService, private 
     modalService: NgbModal, private config: NgbModalConfig,
     private searchService:SearchService, private auth:AuthService, public 
     prodcomp:ProductItemComponent,
     private _imageService:ImageService, private formBuilder: 
     UntypedFormBuilder,private alertService: AlertService,  private _ 
     wishlistitemService: WishlistItemService)

   {

   //Tried to do something like this with no luck      
    // this.cartService.itemTotals$.subscribe((v: any) => (this.itemTotal$ = v));
        
   }

     ngOnInit(): void {
       this.loadCartItems();
    }


     loadCartItems(){
      this.cartService.getCartItems().subscribe((item) => {
      this.cartitems$ = item;
      // alert("A cart item" + item);
      this.calNumberOfItems();
     })
   }



   calNumberOfItems(){;
     for(this.qty=0; this.qty < this.cartitems$.length; this.qty++){
      this.qty
   }
      this.itemTotal$ = this.qty; 

  }

header.html

 </span><span ><i class="fas fa-circle" aria-hidden="true" style="font-size: 25px; 
 margin-top: -20px; cursor:none; color:#1D004F;"><strong style="color:#ffffff; margin- 
 left: -18px; padding-top: 0; font-size:10px; text-align: center; line-height: 20px;"> 
 {{itemTotal$}}</strong></i></span></a>            

购物车.service.ts

  export interface Cartitems{
  _id: string,
  name: string,
  size: string,
  qty: number,
  price: number,
  imageUrl:string
}



  @Injectable({
  providedIn: 'root'

 })

export class CartService {

  
 rootUrl = 'api';    

 cartitems$= new BehaviorSubject<Cartitems[]>([]);   //this works
  //itemTotals$  = new BehaviorSubject<Cartitems[]>([]);



  getCartItems(): Observable<Cartitems[]> {
   return this.http.get<Cartitems[]>(this.rootUrl + '/getProducts/cartitems')
    
  }

}

如果有人可以向我解释我是什么，我只会添加相关代码 缺少我将不胜感激 谢谢你提前

Answer 1

您需要一个服务来在组件之间共享数据，如下所示：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { Cartitems } from './cartitems.interface'; // Ensure you have this interface defined properly

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private cartItemsSource = new BehaviorSubject<Cartitems[]>([]);
  currentCartItems = this.cartItemsSource.asObservable();

  constructor() { }

  updateCartItems(cartItems: Cartitems[]) {
    this.cartItemsSource.next(cartItems);
  }
}

为了获得最佳实践，在组件之间共享数据的服务应与执行 API 请求以从数据库获取数据的服务分开

这将是执行从数据库获取已保存项目的请求的服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DataService } from './data.service';
import { Cartitems } from './cartitems.interface';

@Injectable({
  providedIn: 'root'
})
export class CartService {

  constructor(private http: HttpClient, private dataService: DataService) { }

  getCartItems() {
    this.http.get<Cartitems[]>(this.rootUrl + '/getProducts/cartitems').subscribe(
      data => {
        this.dataService.updateCartItems(data);
      },
      error => {
        console.error('Error fetching cart items', error);
      }
    );
  }
}

从 db 获取数据的服务可以依赖于您共享数据的服务，因此一旦您从 db 请求数据，您就可以将其发布到 sharedata 服务上

这将是从后端请求购物车的组件。这就像主页，您需要在其中获取产品，甚至可以是购物车组件。您需要获取与标头组件不同的购物车商品的任何地方。如果在此组件中您有想要添加到购物车的商品，添加后，您可以使用 dataService 发布更新的购物车商品，以便您的标题也可以更新

import { Component, OnInit } from '@angular/core';
import { CartService } from './cart.service';

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

  constructor(private cartService: CartService) { }

  ngOnInit(): void {
    this.cartService.getCartItems();
  }
}

这就是您在 headerComponent 中订阅 Dataservice 以获取组件之间共享数据的方式。一旦角度应用程序中的另一个组件更新了 dataService，任何订阅者也会收到通知

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
import { Cartitems } from './cartitems.interface';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  cartItems: Cartitems[] = [];

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    this.dataService.currentCartItems.subscribe(
      cartItems => {
        this.cartItems = cartItems;
      },
      error => {
        console.error('Error getting cart items', error);
      }
    );
  }
}