使用路由时如何将参数传递到Ionic Core中的根导航页面？答案

【问题标题】：How can parameters be passed to the root navigation page in Ionic Core when using routing?使用路由时如何将参数传递到Ionic Core中的根导航页面？
【发布时间】：2022-01-09 13:29:04
【问题描述】：

概述

在 Ionic Framework 中，参数可以使用push function in an ion-nav component 传递给页面，参数可以使用rootPage 参数传递给根页面。下面的代码展示了如何做到这一点：

// 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>
*/

This fiddle 是代码的一个工作示例。

问题

如果ion-router 元素用于确定应将哪个页面显示为根页面（而不是ion-nav root 属性），则rootParam 将被忽略。

/*
<!-- modified body -->
<body>
<ion-router>
  <ion-route url='/' component='new-page'></ion-route>
</ion-router>
<ion-nav></ion-nav>
</body>
*/

This fiddle 是修改后的代码示例。

问题

将 Ionic 与 JavaScript（不是 Angular、React 或 Vue）一起使用，在使用 ion-router 时如何将变量正确传递到根页面？

【问题讨论】：

标签： javascript ionic-framework

【解决方案1】：

由于我的问题被接受为a bug for the project on Github，因此我最初在问题中发布的解决方法就是解决方案。

首选解决方法

window 或document 全局对象可用于存储变量，这些变量可由 HTMLElement 类访问。

替代解决方法

可以使用初始化函数将变量传递给模块，但导入和调用initialize 函数成为前提条件。这需要在每个包含可能是根页面的 HTMLElement 的模块中创建和调用 initialize 函数。

// Module initialization code example
let a;
export function initialize(_a) {
  _a = a;
}

【讨论】：