Visión general
En Ionic Framework, los parámetros se pueden pasar a las páginas usando la función push en un componente ion-nav y los parámetros se pueden pasar a la página raíz usando el parámetro rootPage . El siguiente código muestra cómo se puede hacer esto:
// The navigation element const nav = document.querySelector('ion-nav'); class NewPage extends HTMLElement { async connectedCallback() { this.innerHTML = ` <ion-header class='gallery-page' translucent> <ion-toolbar> <ion-buttons slot="start"> <ion-back-button /> </ion-buttons> <ion-title>Root Page</ion-title> </ion-toolbar> </ion-header> <ion-content fullscreen class="ion-padding"> a: ${this.a}, b: ${this.b} <br /> <ion-button>New Page</ion-button> </ion-content> `; const btn = this.querySelector('ion-button'); btn.addEventListener('click', () => { nav.push('new-page', { a: this.a + 1, b: this.b + 1}); }) } } customElements.define('new-page', NewPage); nav.rootParams = { a: 1, b: 2 }; /* <!-- original body --> <body> <ion-nav root='new-page'></ion-nav> </body> */Este violín es un ejemplo práctico del código.
Problema
Si se utiliza un elemento ion-router para determinar qué página debe mostrarse como página raíz (en lugar del atributo root ion-nav ), entonces se ignora rootParam .
/* <!-- modified body --> <body> <ion-router> <ion-route url='/' component='new-page'></ion-route> </ion-router> <ion-nav></ion-nav> </body> */Este violín es un ejemplo del código modificado.
Pregunta
Usando Ionic con JavaScript (no Angular, React o Vue), ¿cómo se pueden pasar correctamente las variables a la página raíz cuando se usa ion-router ?
Dado que mi problema fue aceptado como un error para el proyecto en Github , la solución alternativa que publiqué originalmente en la pregunta es la solución.
Solución alternativa preferida
Los objetos globales de window o document se pueden usar para almacenar variables, a las que se puede acceder mediante clases HTMLElement.
Solución alternativa
Las variables se pueden pasar a los módulos mediante una función de inicialización, pero importar y llamar a la función de initialize se convierte en una condición previa. Esto requiere crear y llamar funciones de initialize en cada módulo que contenga un HTMLElement que podría ser la página raíz.
// Module initialization code example let a; export function initialize(_a) { _a = a; }