Question

我是Ionic的初学者，在用户点击按钮时尝试显示侧边菜单页面。相反，我仍然得到的是后退按钮。这是我的代码：

// menu .html

<ion-header>

  <ion-navbar>
    <ion-title>menu</ion-title>

    <ion-buttons start>
      <button ion-button icon-only menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>

  </ion-navbar>

</ion-header>

// app.html

<ion-menu [content]="content">



<ion-content padding>

  <h2>This is a cool menu</h2>
  </ion-content>



</ion-menu>
<ion-nav [root]="rootPage" #content></ion-nav>

我做错了什么？

Answer 1

简介

好的，离子的导航就像堆栈一样。您将组件推入堆栈，将其弹出或创建新堆栈。

要推送堆叠中的组件，您需要拨打电话（如果您拨打NavController navCtrl）navCtrl.push(someComponent);

要弹出组件，请致电navCtrl.pop(someComponent);

要创建新堆栈，请致电navCtrl.setRoot(someComponent);

为什么这很重要？

如果您希望显示菜单图标，则页面必须位于堆栈的最低级别，这是名为root的离子。

如果网页不是root，则菜单图标会神奇地转换为back-button，因此您可以返回到root页面。（例如，当您想要查看有关某个项目的更多详细信息时）

当然，不再阅读，但我需要做什么？

首先，只需在您的网页上添加<ion-header>，因为您想在页面上显示图标。在您的代码中，您尝试在menu-icon中获得ion-menu（这是您的副手）。

因此，您将拥有以下内容，在app.component.html

中创建菜单

<强> app.component.html

<ion-menu type="overlay" [content]="content"> 
  <ion-content>
    <button menuClose icon-only>
      <ion-icon name="close"></ion-icon>
    </button>

    <button menuClose>
       My Custom button WHOOOOO
    </button>
  </ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

<强> page1.html

<ion-header>
  <ion-navbar>
    <ion-title>Page 1 FTW</ion-title>
    <ion-buttons start>
       // So this icon will change depending on the page's place in the ionic Stack
       <button ion-button icon-only menuToggle>
         <ion-icon name="menu"></ion-icon>     
       </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content>
   <button ion-button menuToggle>Open my great menu!</button>
</ion-content>

现在，在您的app.component.ts Page1 root rootPage，这样您就会在标题中看到您的菜单图标。

通过更改AppComponent的{{1}}属性可以轻松完成此操作。

只需import { Page1 } from 'your/page1/location'并致电（在构造函数f.e。this.rootPage = Page1;;

现在Page1会在其标题中显示一个菜单图标，以显示您的菜单！

如果您想要添加一个用于打开菜单的按钮，只需添加menuToggle属性即可。

Answer 2

您的代码似乎顺序错误。你可以试试下面的代码吗？

<ion-menu>

  <ion-header>
      <ion-navbar>
          <button ion-button icon-only menuToggle>
            <ion-icon name="menu"></ion-icon>
          </button>
          <ion-title>Menu</ion-title>
        </ion-navbar>
  </ion-header>

    <ion-content padding>

        <h2>This is a cool menu</h2>
    </ion-content>


</ion-menu>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

离子秀菜单导航图标

2 个答案:

简介

为什么这很重要？

当然，不再阅读，但我需要做什么？