Angular2：订阅没有被触发

我正在一个应用程序，我订阅服务的变化，但不知何故它没有检测到变化，我没有得到最近的数据，任何人都可以告诉我我失踪的地方。Angular2：订阅没有被触发

基本上它是一个购物车应用程序，我正在用产品傀儡购物车。

组件在那里我订阅的变化..

import { Component, OnInit, ChangeDetectorRef } from '@angular/core'; 
import { CartService } from '../services/cart.service'; 
import { Subscription } from 'rxjs/Subscription'; 

@Component({ 
    selector: 'app-cart-observer', 
    templateUrl: './cart-observer.component.html', 
    styleUrls: ['./cart-observer.component.css'], 
    providers: [CartService] 
}) 
export class CartObserverComponent implements OnInit { 

    products: any[] = []; 
    numProducts: number = 0; 
    cartTotal: number = 0; 
    changeDetectorRef: ChangeDetectorRef; 

    constructor(private cartService: CartService, changeDetectorRef: ChangeDetectorRef) { 
    this.changeDetectorRef = changeDetectorRef; 
    } 

    ngOnInit() { 
    this.cartService.productAdded$$.subscribe(data => { 
     console.log(data); 
     this.products = data.products; 
     this.cartTotal = data.cartTotal; 
     console.log(this.products); 
     this.changeDetectorRef.detectChanges(); 
    }); 
    } 

    deleteProduct(product) { 
    this.cartService.deleteProductFromCart(product); 
    }}

车服务：从那里我推变化

import { Injectable } from '@angular/core'; 
import { Product } from '../product-list/product'; 
import { Subject } from 'rxjs/Subject'; 

@Injectable() 
export class CartService { 
    products: any[] = [] 
    cartTotal: number = 0 

    private productAddedSource = new Subject<any>() 


    productAdded$$ = this.productAddedSource.asObservable(); 
    constructor() { } 

    addProductToCart(product) { 
     console.log(product); 
     let exists = false; 
     let parsedPrice = product.price; 
     this.cartTotal += parsedPrice 
     //Search this product on the cart and increment the quantity 
     this.products = this.products.map(_product => { 
      if (_product.product.id == product.id) { 
       _product.quantity++ 
       exists = true 
      } 
      return _product 
     }) 
     //Add a new product to the cart if it's a new product 
     if (!exists) { 
      product.parsedPrice = parsedPrice 
      this.products.push({ 
       product: product, 
       quantity: 1 
      }) 
     } 
     console.log(this.products); 
     this.productAddedSource.next({ products: this.products, cartTotal: this.cartTotal }); 
    } 

    deleteProductFromCart(product) { 
     this.products = this.products.filter(_product => { 
      if (_product.product.id == product.id) { 
       this.cartTotal -= _product.product.parsedPrice * _product.quantity 
       return false 
      } 
      return true 
     }) 
     this.productAddedSource.next({ products: this.products, cartTotal: this.cartTotal }) 
    } 


    flushCart() { 
     this.products = [] 
     this.cartTotal = 0 
     this.productAddedSource.next({ products: this.products, cartTotal: this.cartTotal }) 
    } 

}

来源

2017-09-03 Alok G.

使用'BehviourSubject'而不是'Subject' – Aravind

@Aravind如何帮助？ – jonrsharpe

考虑到您使用的是组件“装饰器”的提供者数组，很可能您正在创建该服务的多个实例 –

感谢乡亲的意见，其时我删除解决成分

providers: [CartService]

来自我订阅更改的组件。

来源

2017-09-03 11:10:36

Angular2：订阅没有被触发

回答

相关问题