I am trying to pass data from one page to another with Angular routing. It works perfectly fine when entering the "next" page for the first time. However, when going back to the home page and pressing another item the state of the Router will not be updated. It will continue to show values from the first time an item was clicked.

Anyone an idea how to make that work?

I already tried several things e.g. resetting all values "manually":

  pageBack() {
    this.router.navigate(['tabs/homepage'], { 
      state: { 'space': undefined }
    });
    this.space = {};
    this.userId = '';
    this.spaceId = '';
    this.spaceName = '';
  }

Here is the code:

home.page.html

<div *ngIf="spaces">
  <ion-item-sliding *ngFor="let space of spaces | async;">
    <ion-item (click)="openspacedetailsPage(space)" detail>
      <ion-icon name="ellipse-outline" start></ion-icon>
      <ion-label>
        &nbsp; {{ space.spaceName }}
      </ion-label>
    </ion-item>
  </ion-item-sliding>
</div>

home.page.ts

  openspacedetailsPage(space) {
    this.router.navigate(['tabs/space-details'], {
      state: { 'space': space }
    });
  }

space-details.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="tabs/activities" (click)="pageBack()"></ion-back-button>
    </ion-buttons>
    <ion-title>{{ spaceName }}</ion-title>
  </ion-toolbar>
</ion-header>

space-details.page.ts

  pageBack() {
    this.router.navigate(['tabs/homepage'], { 
      state: { 'space': undefined }
    });
    this.space = {};
    this.userId = '';
    this.spaceId = '';
    this.spaceName = '';
  }

CodePudding user response：

In this case you need to use Angular EventEmitter.

You can check this answer. What is the proper use of an EventEmitter?

CodePudding user response：

I solved with a slightly different approach using a data service to pass values between pages: How to pass Objects between pages in Angular?