如何更新/刷新 Angular 路由器“状态”？

Posted 2023-03-13

【中文标题】如何更新/刷新 Angular 路由器“状态”？

【英文标题】：How to update/refresh an Angular Router 'state'?

【发布时间】：2022-01-18 22:35:54

【问题描述】：

我正在尝试使用 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 = '';
  

【参考方案1】：

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

您可以检查此答案。 What is the proper use of an EventEmitter?

【讨论】：

我试过这样： openspacedetailsPage(space) this.router.navigate(['tabs/space-details']) this.onChange.emit(space); 但它只传递未定义的值。

【参考方案2】：

我使用数据服务在页面之间传递值的方法略有不同：How to pass Objects between pages in Angular?