使用通过 BehaviorSubject / Angular2 初始化的全局变量

Question

我的应用中有目录组件和购物车服务。我想将我的 Catalog（存储在 JSON 中的对象数组）中的产品添加到 Cart。

因此，我需要在添加/删除产品时动态更改我的购物车。 出于这个原因，我尝试使用 { BehaviorSubject }。

购物车服务：

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


@Injectable()
export class CartService {
  public cart = new BehaviorSubject(null);//my globally available Cart

}

目录组件：

import { Component, OnInit } from '@angular/core';
import { CatalogService } from './catalog.service';
import { CartService } from '../cart/cart.service';//my globally available Cart imported to the current component

@Component({
  selector: 'catalog',
  templateUrl: './catalog.component.html',
  styleUrls: ['./catalog.component.scss']
})

export class CatalogComponent implements OnInit { 
  catalog: any;
  image: any;
  title: string;
  description: string;
  prod: any;
  visible: boolean;

constructor(public catalogService: CatalogService, public cartService: CartService){ } 

ngOnInit(){

    this.catalogService.getCatalogItems().subscribe(
        (data) => this.catalog = data
    );
}

  toCart(prod){
      this.cartService.cart.subscribe((val) => {
            console.log(val); 
      });

    this.cartService.cart.push(prod);//I want to add new product to the Cart by this
  }

}

但控制台抛出以下错误：

那么，我应该怎么做才能通过 BehaviorSubject 在全局范围内使用我的 Cart？

Answer 1

问题是流式传输购物车的全部内容。因此，我们应该在某个特定时刻记录购物车中的所有物品。 因此，每次将商品添加到购物车时，我们都会通过 cart$.next() - （而不是推送）发送一个新的流值。

从错误中可以看出，BehaviourSubject 没有 push 方法。

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


@Injectable()
export class CartService {
  public cart$ = new BehaviorSubject(null);//my globally available Cart

  private cartAr:Product[] = [];

  public addToCart(prod:Product)
  {
    this.cartAr.push(prod);
    this.cart$.next(this.cartAr);
  }
}


//--------Component----------

import { Component, OnInit } from '@angular/core';
import { CatalogService } from './catalog.service';
import { CartService } from '../cart/cart.service';//my globally available Cart imported to the current component

@Component({
  selector: 'catalog',
  templateUrl: './catalog.component.html',
  styleUrls: ['./catalog.component.scss']
})

export class CatalogComponent implements OnInit { 
  catalog: any;
  image: any;
  title: string;
  description: string;
  prod: any;
  visible: boolean;

constructor(public catalogService: CatalogService, public cartService: CartService){ } 

ngOnInit(){

    this.catalogService.getCatalogItems().subscribe(
        (data) => this.catalog = data
    );
}

  toCart(prod){
      this.cartService.cart$.subscribe((val) => {
            console.log(val); 
      });

    this.cartService.addToCart(prod);
  }

}

Answer 2

  toCart(prod){
      // missing `this.`
      // vv
      this.cartService.cart.subscribe((val) => {
            console.log(val); 
      });

    this.cartService.cart.push(prod);//I want to add new product to the Cart by this
  }