角度：避免调用嵌套在另一个可观察对象内部的可观察对象

Question

当组件加载时，使用zip运算符找到购物车时，我有以下代码会进行一些API调用。

  ngOnInit() {
    const deliveryModes$ = this.checkoutService.getDeliveryModes();
    const deliveryCountries$ = this.checkoutService.getDeliveryCountries();
    const paymentMode$ = this.checkoutService.getPaymentModeList();

    this.store.select('cart').subscribe((cart: Cart) => {
      if (cart) {
        if (cart.entries.length > 0) {
          this.cart = cart;
          Observable.zip(deliveryModes$, deliveryCountries$, paymentMode$)
            .subscribe(serviceList => {
              this.deliveryModes = serviceList[0];
              this.deliveryCountries = serviceList[1];
              this.paymentModes = serviceList[2];
              this.paymentMethod = this.paymentModes[0].code;
              if (this.paymentMethod === 'paymetric') {
                this.getPaymetricIframe();
              }
              this.initCheckoutForm();
            });
        } else {
          this.router.navigate(['/']);
        }
      } else {
        this.router.navigate(['/']);
      }
    });
  }

我面临的问题是我在其他地方有一些代码可以更新购物车，因此将再次调用此代码（因为它正在订阅购物车），这意味着将再次进行三个调用，而我不希望那样。 组件初始化时，仅应调用这三个服务。

我可以添加一些避免调用Observable.zip的方法，它可以正常工作

if(this.cartInitialized) { 
   return 
}

但我想知道对于此代码块是否有更好的设计。

Answer 1

下面模仿工作示例@ https://jsfiddle.net/a8yc1ngn/4/

ngOnInit() {
    const deliveryModes$ = this.checkoutService.getDeliveryModes();
    const deliveryCountries$ = this.checkoutService.getDeliveryCountries();
    const paymentMode$ = this.checkoutService.getPaymentModeList();

    /*  subscribe while cart is valid ...
        NOTE: replace takeWhile with filter, if navigation to root is not necessary ..*/
    const cartChange$ = this.store.select('cart').takeWhile((cart :Cart) => cart && cart.entries.length);
    /*  keep updating local cart with changes....
        navigate to root is cart is invalid, means subcription is completed ...*/
    cartChange$.subscribe((cart :Cart) => this.cart = cart,
        () => console.log('errr ..')  , 
        () => this.router.navigate(['/']));
    /*  first time a cart update comes, fetch serviceList(s) ... */
    cartChange$.take(1)
        .mergeMap(() => Observable.zip(deliveryModes$, deliveryCountries$, paymentMode$))
        .subscribe(serviceList => {
            /* things to do .... */
        });
}