离子显示菜单导航图标

Question

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

//菜单.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

介绍

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

要将组件推入堆栈，您需要调用（如果您调用NavController navCtrl ） navCtrl.push(someComponent);

要弹出一个组件，请调用navCtrl.pop(someComponent);

要创建一个新堆栈，请调用navCtrl.setRoot(someComponent);

为什么这很重要？

如果要显示菜单图标，则页面必须位于堆栈的最低层，以离子的形式称为root 。

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

当然，不再真正阅读了，但是我该怎么办？

好吧，首先，只需在页面上包含<ion-header> ，因为您想在页面上显示图标。 在您的代码中，您试图在ion-menu （这是您的ion-menu获得一个menu-icon 。

因此，您将获得如下所示的内容，在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 。

只需import { Page1 } from 'your/page1/location'并调用（在构造函数fe 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>