Javascript RxJS如何取消订阅服务方法

Question

我有一个在单击按钮后执行的函数。

async executeAction(action: Action) {
    const proceedingReturnView = this.getCurrentView();
    this.srv.execute(action, proceedingReturnView);
  }

  public getCurrentView(): ViewData {
    console.log('I am here 1');
    const paramMap = this.activatedRoute.snapshot.paramMap;
    const queryParamMap = this.activatedRoute.snapshot.queryParamMap;
    return ProceedingViewComponent.getCurrentView(paramMap, queryParamMap, 'PODSTAWOWE', false);
  }

getCurrentView() 读取当前视图的详细信息，然后将其作为参数传递给下一个视图，因此当我单击返回按钮时，我将返回执行操作的视图。

服务执行方法：

  async execute(a: Action, returnView: any) {
    console.log('Recived parameters');
    console.table(returnView);
    const callerViewPath = returnView ? returnView.viewPath : '';
    const callerViewParams = returnView ? JSON.stringify(returnView.viewParams) : '';

    this.caseSrv.giveActionCall(
      a.id,
      callerViewPath,
      callerViewParams
    ).subscribe(
      wa => {
        if (wa.actionType=== 'PORTAL_CHANGE_VIEW') {
          console.log('I am here2');
          console.log(wa);
          this.portalService.changeView(wa.actionName, this.getChangeViewParams(wa));
        }
      }
    );
  }

第一次执行后一切正常。返回视图详细信息作为 callerViewPath 和 callerViewParams 传递。在我使用我的应用程序返回箭头后，它将返回到我执行操作的位置。

但是当我再次尝试执行它时，两个返回视图参数都是空的，并且似乎代码是从 execute() 方法中的 subscribe 开始的。控制台中的第一个输出是“我在这里 2”。

我试图在销毁时以某种方式取消订阅，但该服务始终“存在”于应用程序生命周期中。

我是 RxJS 的初学者。我该如何解决这个问题？

Answer 1

您需要在组件中持久化subscription，并在执行onDestroy 时取消订阅。因此需要返回Subscription from service

服务：

async execute(a: Action, returnView: any):Promise<Subscription> {

    const subscription = this.caseSrv.giveActionCall(
      a.id,
      callerViewPath,
      callerViewParams
    )



    subscription.subscribe(
      wa => {
        if (wa.actionType=== 'PORTAL_CHANGE_VIEW') {
          console.log('I am here2');
          console.log(wa);
          this.portalService.changeView(wa.actionName, this.getChangeViewParams(wa));
        }
      }
    );

    return subscription;
  }

组件代码示例：

 private subscription;

 ngOnDestroy(){
   if(!!this.subscription){
     this.subscription.unsubscribe();
   }
 }

 async executeAction(action: Action) {
   const proceedingReturnView = this.getCurrentView();
   this.subscription = await this.srv.execute(action, proceedingReturnView);
 }