真的很喜欢新的 ionic 4 组件——尤其是 NO Angular。
问题：我像这样使用 ion-nav：
navElRef.push('second-page')
动画不正确。看来我没有设置正确的参数或类名或其他东西。是否有关于如何在没有角度的情况下使用 Ionic 4 nav 的文档/建议？
【问题讨论】：
标签： javascript ionic-framework web-component
因此，在 Ionic Framework 4 文档中闲逛了两天后，我发现基本上没有任何内容可以解释如何执行此操作。
但是，...实际上实现起来并不难。
转到：https://beta.ionicframework.com/docs/api/nav/。然后检查电话示例的元素。在 Chrome 开发工具（或您使用的任何工具）的元素选项卡中找到 iframe。复制该 src 并在新的浏览器选项卡中打开它。现在，您可以看到一个不使用框架的工作示例。您可以只复制 HTML src 并从中创建自己的 index.html，它应该可以工作。
使 ion-nav 工作的列表如下：
您可以使用 ion-nav-push 组件将另一个页面推送到导航组件上。但是，更有可能的是，您将使用路由器（React、Page 等）来处理这个问题。在您的特定路由器解决方案中，通过调用 ion-nav 元素上的 push 方法来发起页面导航：类似于：
document.querySelector('ion-nav').push('page-two')
您可以在此处阅读有关调用导航方法的更多信息：https://beta.ionicframework.com/docs/api/nav/
这是一个例子：
<!DOCTYPE html>
<html dir="ltr" class="plt-desktop ios" mode="ios">
<head>
<meta charset="UTF-8">
<title>Nav</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="https://unpkg.com/@ionic/core@4.0.0-beta.11/dist/ionic.js"></script>
<link rel="stylesheet" type="text/css" href="https://beta.ionicframework.com/docs/overrides.css">
<link rel="stylesheet" href="https://unpkg.com/@ionic/core@4.0.0-beta.11/css/ionic.bundle.css">
<script>
class PageOne extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header translucent>
<ion-toolbar>
<ion-title>Page One</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding fullscreen>
<h1>Page One</h1>
<ion-nav-push component="page-two">
<ion-button class="next">Go to Page Two</ion-button>
</ion-nav-push>
</ion-content>
`;
}
}
class PageTwo extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header translucent>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button text="Page One"></ion-back-button>
</ion-buttons>
<ion-title>Page Two</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding fullscreen>
<h1>Page Two</h1>
<div>
<ion-nav-push component="page-three">
<ion-button class="next">Go to Page Three</ion-button>
</ion-nav-push>
</div>
</ion-content>
`;
}
}
class PageThree extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header translucent>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button text="Page Two"></ion-back-button>
</ion-buttons>
<ion-title>Page Three</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding fullscreen>
<h1>Page Three</h1>
</ion-content>
`;
}
}
customElements.define('page-one', PageOne);
customElements.define('page-two', PageTwo);
customElements.define('page-three', PageThree);
</script>
</head>
<body>
<ion-app>
<ion-nav root="page-one"></ion-nav>
</ion-app>
<style>
ion-toolbar {
--background: white;
}
</style>
</body>
</html>
【讨论】：
ion-router 进行导航？