如何 update/refresh 一个 Angular 路由器 'state'？

Question

我正在尝试使用 Angular 路由将数据从一个页面传递到另一个页面。第一次进入“下一个”页面时，它工作得很好。但是，当返回主页并按另一个项目时，路由器的 state 将不会更新。它将继续显示第一次单击项目时的值。

有人知道如何实现吗？

我已经尝试了几件事，例如“手动”重置所有值：

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

代码如下：

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

Answer 1

在这种情况下，您需要使用 Angular EventEmitter。

你可以查看这个答案。

Answer 2

我使用数据服务在页面之间传递值的方法略有不同：

如何 update/refresh 一个 Angular 路由器 'state'？

How to update/refresh an Angular Router 'state'?

html

typescript

ionic-framework

angular