离子4导航组件，无角度

Question

离子4导航组件，无角度

ris*_*ger 3 javascript web-component ionic-framework

非常喜欢新的ionic 4组件-尤其是NO Angular。

但问题：我像这样使用ion-nav：

navElRef.push('second-page')

Run Code Online (Sandbox Code Playgroud)

动画不正确。看来我没有设置正确的参数或类名之类的东西。是否有有关如何使用Ionic 4 nav的无角度文档/建议？

Answer 1

ris*_*ger 9

因此，在Ionic Framework 4文档中摆弄了两天之后，我发现基本上没有什么可以解释如何执行此操作的。

但是，...实际上并不难实现。

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

使ion-nav起作用的列表如下：

确保HTML标签中包含class =“ plt-desktop ios” mode =“ ios” attrs（或您想要的任何OS）
确保包含js和CSS：“ https://unpkg.com/@ionic/core@4.0.0-beta.11/dist/ionic.js ”和“ https://unpkg.com/@ionic/ HTML文件中的core@4.0.0-beta.11/css/ionic.bundle.css
确保ion-nav包裹在ion-app标签的内部。
在您的ion-nav中添加root =“ page-one” attr，以表示要最初显示的Web组件。“ page-one”是由window.customElements.define定义的组件名称-无论您想要什么。
您可以使用ion-nav-push组件将另一页推到nav组件上。但是，更有可能的是，您将使用路由器（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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，1 月前
查看次数：	2328 次
最近记录：	6 年前