概述
在 Ionic Framework 中，可以使用組件中的push函式將ion-nav引數傳遞到頁面，并使用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 >
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？
uj5u.com熱心網友回復：
由于我的問題被接受為Github 上專案的錯誤，因此我最初在問題中發布的解決方法是解決方案。
首選解決方法
該window或document全域物件可以用來存盤變數，可以通過HTML元素類訪問。
替代解決方法
可以使用初始化函式將變數傳遞給模塊，但匯入和呼叫該initialize函式成為前提條件。這需要initialize在包含可能是根頁面的 HTMLElement 的每個模塊中創建和呼叫函式。
// Module initialization code example
let a;
export function initialize(_a) {
_a = a;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/380703.html
標籤：javascript 离子框架
上一篇：離子選擇回圈中的選定值