Ionic Core中使用路由时如何向根导航页面传递参数？

Question

概览

在 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时将变量正确传递到根页面？

Answer 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;
}

Ionic Core中使用路由时如何向根导航页面传递参数？

How can parameters be passed to the root navigation page in Ionic Core when using routing?

javascript

ionic-framework