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

CodePudding user response：

Here is the solution:

space-details.page.ts

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

CodePudding user response：

You could use QueryParms to achieve that. home.page.ts

  openspacedetailsPage(space) {
    this.dataService.setSpace(space);
    this.router.navigate(["tabs/space-details"],{queryParams: {space}});
  }

space-details.page.ts

import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) { }
  ngOnInit() {
        this.route.queryParams
          .subscribe(params => {
            console.log(params); 
            this.space = params.space;
              }
        );
      }