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