没有 Angular 的 Ionic 4 导航组件

Question

Really loving the new ionic 4 components -- especially, NO Angular.真的很喜欢新的 ionic 4 组件——尤其是没有 Angular。

Issue though: I use the ion-nav like so:但问题是：我像这样使用 ion-nav：

navElRef.push('second-page')

The animation is not right.动画不对。 It seems I'm not setting the right parameters or classname or something.看来我没有设置正确的参数或类名或其他东西。 Is there docs/advice on how to use Ionic 4 nav WITHOUT angular?是否有关于如何在没有角度的情况下使用 Ionic 4 导航的文档/建议？

Answer 1

So, after mucking around in the Ionic Framework 4 docs for two days, I see that there's basically nothing there to explain how to do this.所以，在 Ionic Framework 4 文档中混了两天之后，我发现基本上没有什么可以解释如何做到这一点的。

But, ... its actually not that hard to implement.但是，......它实际上并不难实施。

Got to: https://beta.ionicframework.com/docs/api/nav/ .到： https : //beta.ionicframework.com/docs/api/nav/ 。 Then inspect the element of the phone example.然后检查电话示例的元素。 Find the iframe in the elements tab of Chrome dev tools (or whatever you use).在 Chrome 开发工具（或您使用的任何工具）的元素选项卡中找到 iframe。 Copy that src and open it in a new browser tab.复制该 src 并在新的浏览器选项卡中打开它。 Now, you can see a working example that uses no framework.现在，您可以看到一个不使用框架的工作示例。 You can just copy the HTML src and create your own index.html from that and it should work.您可以复制 HTML src 并从中创建您自己的 index.html，它应该可以工作。

The list of making the ion-nav work is this:使 ion-nav 工作的列表是这样的：

Make sure to have class="plt-desktop ios" mode="ios" attrs in HTML tag (or whatever os you want)确保在 HTML 标签（或任何你想要的操作系统）中有 class="plt-desktop ios" mode="ios" attrs
Make sure to have included js and CSS: ' https://unpkg.com/@ionic/core@4.0.0-beta.11/dist/ionic.js ' and ' https://unpkg.com/@ionic/core@4.0.0-beta.11/css/ionic.bundle.css ' in HTML file确保包含 js 和 CSS：' 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 ' 在 HTML 文件中
Make sure the ion-nav is wrapped inside of the ion-app tag.确保 ion-nav 被包裹在 ion-app 标签内。
add root="page-one" attr to your ion-nav signifying what web component you want to be initially shown.将 root="page-one" attr 添加到您的 ion-nav 表示您希望最初显示的 Web 组件。 "page-one" is the name of your component as defined by window.customElements.define -- whatever you want it to be. “page-one”是由 window.customElements.define 定义的组件名称——无论你想要它是什么。
You can use an ion-nav-push component to push another page onto the nav component.您可以使用 ion-nav-push 组件将另一个页面推送到导航组件上。 But, more likely, you'll be using a router (React, Page, etc, etc) to handle this.但是，更有可能的是，您将使用路由器（React、Page 等）来处理此问题。 In your specific router solution instigate the page navigation by calling the push method on the ion-nav element: something like:在您的特定路由器解决方案中，通过调用 ion-nav 元素上的 push 方法来启动页面导航：类似于：
document.querySelector('ion-nav').push('page-two') document.querySelector('ion-nav').push('page-two')

You can read more about calling the navigation methods here: https://beta.ionicframework.com/docs/api/nav/您可以在此处阅读有关调用导航方法的更多信息： https : //beta.ionicframework.com/docs/api/nav/

Here is an example:下面是一个例子：

<!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>

没有 Angular 的 Ionic 4 导航组件

问题描述

1 个解决方案

解决方案1
10 已采纳 2018-10-04 20:46:45

没有 Angular 的 Ionic 4 导航组件

问题描述

1 个解决方案

解决方案1 10 已采纳 2018-10-04 20:46:45

解决方案1
10 已采纳 2018-10-04 20:46:45