0

I am trying to make that a component which is subscribed to a Subject executes the code related to the change of state of the Subject before the component is initialized (ngOnInit ()). Here is the CartService:

 
.... import ....
@Injectable({
  providedIn: 'root'
})
 
export class CartService {
  public updateCartSubject = new Subject<any>();
  public cart: any;
  constructor() {
  }
 
  public updateCart(data) {
    this.cart = data;
    this.updateCartSubject.next(this.cart);
  }
....
}

Here is the CheckoutCartComponent :

.... import ....
export class CheckoutCartComponent implements OnInit, OnDestroy {
  public items = [];
  public coupons = [];
  public paliers = [];
  public paliers_available = [];
  public totals = {
    discount: {
      inc_tax: 0,
      exc_tax: 0
    },
    exc_tax: 0,
    inc_tax: 0,
    subtotal: {
      inc_tax: 0,
      exc_tax: 0
    }
  };
  public countries = [];
  public accept_terms = false;
  public coupon_code = '';
  public coupon_loading = false;
  public coupon_error = false;
  public coupon_success = false;
 
  cartSubscription: Subscription;
 
  constructor(private cartService: CartService) {}
 
  ngOnInit(): void {
    this.cartSubscription = this.cartService.updateCartSubject.subscribe((data) => {
      this.editData(data);
    });
  }
 
  public editData(cart){
    if (cart && cart.items && cart.totals) {
      this.items    = cart.items;
      this.coupons  = cart.coupons;
      this.paliers  = cart.paliers;
      this.paliers_available  = cart.paliers_available;
      this.totals   = cart.totals;
    } else {
      this.items    = [];
      this.coupons  = [];
      this.paliers  = [];
      this.totals   = {
        discount: {
          inc_tax: 0,
          exc_tax: 0
        },
        exc_tax: 0,
        inc_tax: 0,
        subtotal: {
          inc_tax: 0,
          exc_tax: 0
        }
      };
    }
  }
.....

The problem is that the updateCart() function is called in several components but until I am on the CheckoutCartComponent page the code in the suscribe() method is not executed.

Do you have a solution for this?

Thank you in advance, Killian

briandev
  • 29
  • 7
  • The subscription is in the `CheckoutCartComponent`. Then how do you wish to trigger it's callback before the component is rendered? In that case the subscription must be somewhere else. _Why_ does the subscription callback be triggered _before_ the `CheckoutCartComponent` is triggered? – ruth Jun 30 '21 at 12:21
  • Hi @MichaelD and thanks for your help. The cart is updated with the updateCart() function of CartService. This function is called in different components and also on the product page (when I click on the Add To Cart button). But the problem is that because of CheckoutCartComponent is not rendered on the product page when I go to the CheckoutCart page, data of the card (wich is normally changed) is not linked with the data of the CheckoutCartComponent (like this.items, this.coupons etc... you can see that on the code I posted). I hope that it's more clear for you – briandev Jun 30 '21 at 12:34

0 Answers0