使用通過BehaviorSubject / Angular2初始化的全局變量

Question

我的應用程序中有目錄組件和購物車服務 。 我想將我的目錄 （存儲在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在全球范圍內使用購物車 ？

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
  }