Question

我正在学习rxjs，我想我做错了，因为我的BehaviourSubject只发布一次值。

在我的服务 -

中

private cartItemCount = new BehaviorSubject<Observable<Number>>(this.getCartItemsCount());
actualCartItemCount=this.cartItemCount.getValue();

getCartItemsCount(){
return this.http.get<Number>('/api/getCartItemsCount/'+this.getCartID());
}

下面的方法也在上面的添加或删除产品服务中，但是将从 ProductCartComponent 调用，而我在调用行为主题下一个方法

private updateProductCart(cartID:string,productId:number,change:string){
this.cartItemCount.next(this.getCartItemsCount());
return this.http.get<Item>('api/updateProductItem/'+cartID+'/'+productId+'/'+change);
}

现在在我的 NavBar组件中，我订阅 actualCartItemCount 可观察

constructor( private cartService:ShopingCartService)
 { }

ngOnInit() {
this.cartService.actualCartItemCount.
subscribe(res => {this.totalCartItemCount = res;
}

在控制台中我可以看到每当添加或删除时都会调用getCartItemsCount，但是在NavBar组件中，我订阅了 actualCartItemCount 只被调用一次。

请指导我，如果需要更多细节，请告诉我......

Answer 1

首先，请仔细阅读component interaction guide。

如果视图中的NavBar始终存在，则不需要BehaviorSubject，简单的Subject可以这样做。

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs';

@Injectable()
export class CartService {

  // Observable number sources
  private countSource = new Subject<number>();

  // Observable number streams
  count = this.countSource.asObservable();

  // Service message commands
  updateCount(count: number) {
    this.countSource.next(count);
  }
}

在NavBar中，您可以使用async pipe：

直接在模板中使用observable

@Component({
  selector: 'app-nav-bar',
  template: `Count : {{cartService.count | async}}`
})
export class NavBarComponent {
  constructor(private cartService: CartService) {}
  }

在产品购物车中，您可以更新新计数，如下所示，它将更新NavBar或其他任何地方的值：

@Component({
  selector: 'app-product-cart',
  template: `
  `
})
export class ProductCartComponent {
  constructor(private cartService: CartService) {}
  /**
  Update count in the shared service and thus in NavBar
  */
  private updateCartCount(count: number){
     this.cartService.updateCount(count);
  }
  }

BehaviourSubject只发布一次

1 个答案: