0

I have a function which executes after button click.

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() reads details about current view, then pass it as a parameter to the next view, so when I click back button I will return to the view from which I executed the action.

Service execute method:

  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));
        }
      }
    );
  }

After first execution everything works fine. Return view details are passed as callerViewPath and callerViewParams. After I use my application back arrow it will return to the point from where I executed action.

But then when I try to execute it another time both return view parameters are empty and it seems that the code started from subscribe in execute() method. First output in console is "I am here2".

I tried to unsubscribe somehow on destroy, but the service always "lives" in application lifecycle.

I am pretty much begginer in RxJS. How can I solve this problem?

LucasPG
  • 423
  • 1
  • 6
  • 22
  • Possible duplicate of [Angular/RxJs When should I unsubscribe from \`Subscription\`](https://stackoverflow.com/questions/38008334/angular-rxjs-when-should-i-unsubscribe-from-subscription) – Jules Pollender Jan 28 '19 at 12:39
  • What do `this.caseSrv.giveActionCall` and `this.portalService.changeView` do? Why is `execute` declared as `async`? – frido Jan 28 '19 at 13:52
  • giveActionCall() is a webservice which returns all parameters in correct form needed to execute changeView() . changeView() just changes view in apk. Execute() is declared as async cause it conteins method which creates observable. Without async it seems to work same. – LucasPG Jan 28 '19 at 14:02

1 Answers1

0

You need to persist the subscription in the component and unsubscribe it when onDestroy is executed. Therefore it's neccessary to return the Subscription from service

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;
  }

Component code example:

 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);
 }
Bernhard
  • 4,855
  • 5
  • 39
  • 70