[英]Work with a global variable initialized via BehaviorSubject / Angular2
我的应用程序中有目录组件和购物车服务 。 我想将我的目录 (存储在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 $ .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);
}
}
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
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.