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

Question

概述

在 Ionic Framework 中，可以使用ion-nav组件中的push function 将参数传递给页面，并且可以使用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>
*/

这个小提琴是代码的一个工作示例。

问题

如果使用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>
*/

这个小提琴是修改后的代码的一个例子。

问题

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

Answer 1

由于我的问题被接受为Github 项目的错误，因此我最初在问题中发布的解决方法就是解决方案。

首选解决方法

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

替代解决方法

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

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

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-12-08 21:22:02

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-12-08 21:22:02

解决方案1
0 已采纳 2021-12-08 21:22:02