如何在 Angular 中的页面之间传递对象？

Question

我试图在我的 Ionic Angular 应用程序的页面之间传递对象。不幸的是，我还不知道该怎么做。该对象被传递到新打开的“详细信息”页面一次。但是，当返回初始“主页”页面时，对象不再通过。

有人知道如何解决这个问题吗？

代码如下：

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

Answer 1

解决方法如下：

space-details.page.ts

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

Answer 2

您可以使用 QueryParms 来实现。 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;
              }
        );
      }

Answer 3

下面是使用查询参数方式传递对象的方法。有关详细信息，请查看下面的 link。

https://ionicacademy.com/pass-data-angular-router-ionic-4

如何在 Angular 中的页面之间传递对象？

How to pass Objects between pages in Angular?

html

typescript

ionic-framework

angular