Ionic 4 导航组件没有 Angular

Question

真的很喜欢新的离子 4 组件——尤其是，NO Angular。

问题是：我是这样使用 ion-nav 的：

navElRef.push('second-page')

动画不对。看来我没有设置正确的参数或类名或其他东西。是否有关于如何在没有 angular 的情况下使用 Ionic 4 导航的 docs/advice？

Answer 1

因此，在 Ionic Framework 4 文档中折腾了两天之后，我发现基本上没有任何内容可以解释如何执行此操作。

但是，...其实实现起来并不难。

到达：https://beta.ionicframework.com/docs/api/nav/。然后检查 phone 示例的元素。在 Chrome 开发工具（或您使用的任何工具）的元素选项卡中找到 iframe。复制该 src 并在新的浏览器选项卡中打开它。现在，您可以看到一个不使用框架的工作示例。您可以只复制 HTML src 并从中创建您自己的 index.html，它应该可以工作。

使 ion-nav 工作的列表是这样的：

确保 class="plt-desktop ios" mode="ios" 属性在 HTML 标签中（或任何你想要的 os）
确保在 HTML 文件

https://unpkg.com/@ionic/core@4.0.0-beta.11/dist/ionic.js

https://unpkg.com/@ionic/core@4.0.0-beta.11/css/ionic.bundle.css

确保 ion-nav 包裹在 ion-app 标签内。
将 root="page-one" 属性添加到您的 ion-nav 中，表示您希望最初显示的 Web 组件。 "page-one" 是由 window.customElements.define 定义的组件名称 -- 无论您想要它是什么。
您可以使用 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>

Ionic 4 导航组件没有 Angular

Ionic 4 nav component WITHOUT Angular

javascript

web-component

ionic-framework