Estoy tratando de pasar datos de una página a otra con enrutamiento angular. Funciona perfectamente bien al ingresar a la página "siguiente" por primera vez. Sin embargo, al regresar a la página de inicio y presionar otro elemento, el state del enrutador no se actualizará. Continuará mostrando valores desde la primera vez que se hizo clic en un elemento.

¿Alguien tiene una idea de cómo hacer que funcione?

Ya probé varias cosas, por ejemplo, restablecer todos los valores "manualmente":

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

Aquí está el código:

inicio.pagina.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 } }); }

espacio-detalles.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>

espacio-detalles.page.ts

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