How to pass Objects between pages in Angular?

Issue

I am trying to pass Objects between pages in my Ionic Angular app. Unfortunately, I could not figure out how to do that yet. The Object gets passed to the newly opened "details" page once. However, when going back to the initial "home" page the Objects are not getting passed anymore.

Anyone an idea how to fix that?

Here is the code:

home.page.html

<ion-content>
  <div *ngIf="spaces">
    <ion-item-sliding *ngFor="let space of spaces | async;">
      <ion-item
        (click)="openspacedetailsPage(space)"
        routerDirection="forward"
        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.dataService.setSpace(space);
    this.router.navigate(["tabs/space-details"]);
  }

data.service.ts

  setSpace(space) {
    this.space = space;
  }

space-details.page.ts

  ngOnInit() {
    this.space = this.dataService.space;
    this.spaceName = this.space.spaceName
  }

  pageBack() {
    this.space = {};
    this.userId = "";
    this.spaceId = "";
    this.spaceName = "";
    this.dataService.setSpace(undefined);
  }
}

Solution

Here is the solution:

space-details.page.ts

 ionViewDidEnter() {
    this.space = this.dataService.space;
    this.spaceName = this.space.spaceName;
  }

Answered By - HansiFLK