天天看点

SAP 电商云 Spartacus UI shipping method 切换时的 spinner 显示

component 里增加一个新成员属性:setModePressed, 默认为 false

SAP 电商云 Spartacus UI shipping method 切换时的 spinner 显示
在 changeMode 函数执行时,将该属性设置为 true:
SAP 电商云 Spartacus UI shipping method 切换时的 spinner 显示
然后,在对应的 effect 成功调用了 HTTP put 方法之后,将该 boolean 值重新设置为 false.
SAP 电商云 Spartacus UI shipping method 切换时的 spinner 显示
我们通过捕捉 DeliveryModeEvent, 来获知何时 Delivery Mode 成功被设置。

constructor(
    private fb: FormBuilder,
    private checkoutDeliveryService: CheckoutDeliveryFacade,
    private checkoutConfigService: CheckoutConfigService,
    private activatedRoute: ActivatedRoute,
    private events: EventService,
    private ref: ChangeDetectorRef,
    protected checkoutStepService: CheckoutStepService,
  ) {
    const result$ = this.events.get(DeliveryModeEvent);
      result$.subscribe((event) =>{
      console.log('Jerry set delivery mode finished: ',event);
      this.setModePressed = false;
      this.ref.markForCheck();
    });
  }
      

我们通过下列代码,将 DeliveryModeEvent 同 Ngrx action CheckoutActions.SET_DELIVERY_MODE_SUCCESS 绑定在一起。这样一来,一旦有 Ngrx action 发生,我们就能扑捉到它绑定的 DeliveryModeEvent.

SAP 电商云 Spartacus UI shipping method 切换时的 spinner 显示

继续阅读