Estoy usando Ionic 6 y Angular 12 y tengo un par de páginas en el flujo de la aplicación. Fui a la página_4 y cuando revisé mi estructura DOM se ve así:
<ion-router-outlet> <page_1></page_1> <page_2></page_2> <page_3></page_3> <page_4></page_4> </ion-router-outlet>Después de la página 4, quiero navegar a la nueva página 2 y enviar algunos datos a través del objeto de estado:
this.router.navigateByUrl('/page_2', { state: {dataHasChanged: true} });Esperaba:
Ionic creará nuevamente una nueva etiqueta <page_2></page_2> en el DOM a continuación <page_4></page_4>
Puedo recuperar datos de estado como lo hago habitualmente:
this.router.getCurrentNavigation().extras?.state?.dataHasChangedPero el resultado es diferente:
La aplicación vuelve a la <página_2></página_2> anterior y mi estructura DOM se ve así:
<ion-router-outlet> <page_1></page_1> <page_2></page_2> </ion-router-outlet>this.router.getCurrentNavigation().extras es nulo y no puede ver mis datos aquí. Pero puedo ver datos de estado en el objeto windows.history.state
¿Puede alguien explicarme por qué sucedió esto o al menos referirme a alguna documentación valiosa?
Si entras en una página que ya ha sido cargada, no volverá a cargar, o al menos, no siempre. Puede guardar o actualizar el contenido de la página dentro de ionViewWillEnter .
revisa esto
añádelo en tu página.ts
ionViewWillEnter() { ... }Para solucionar el problema de los extras de navegación vacíos puedes compartir datos con un Servicio como este. No es la forma más limpia pero funciona.
import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class DataShareService { private __dataDict = {}; setData(key: string, data: any) { this.__dataDict[key] = data; } getData(key: string) { return this.__dataDict[key]; }}