使用通过 BehaviorSubject / Angular2 初始化的全局变量
Work with a global variable initialized via BehaviorSubject / Angular2
我的应用程序中有 目录组件 和 购物车服务。我想将 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?
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
}
事情是流式传输购物车的全部内容。因此,我们应该在某处的给定时刻记录购物车中的所有物品。
因此,每次将商品添加到购物车时,我们都会通过 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);
}
}
我的应用程序中有 目录组件 和 购物车服务。我想将 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?
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
}
事情是流式传输购物车的全部内容。因此,我们应该在某处的给定时刻记录购物车中的所有物品。 因此,每次将商品添加到购物车时,我们都会通过 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);
}
}