Ionic2 显示菜单导航图标

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

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

这是一份很酷的菜单

---

我做错了什么？

您的标签似乎顺序不对。你能试试下面的代码吗

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

菜单
这是一份很酷的菜单

Intro 好的，爱奥尼亚的导航就像一个堆栈。将组件推到堆栈上，将其弹出或创建新堆栈

要在堆栈上推送组件，需要调用（如果调用

NavController

navCtrl

）

navCtrl.push（someComponent）

要弹出组件，请调用
navCtrl.pop（someComponent）

要创建新堆栈，请调用
navCtrl.setRoot（someComponent）

为什么这很重要？
如果要显示菜单图标，页面必须位于堆栈的最低级别，这在ionic中称为
根

当页面不是
根目录
时，菜单图标将神奇地转换为
返回按钮
，因此您可以返回到
根目录
页面。（f.e.当您想查看有关项目的更多详细信息时）

当然，不再阅读了，但是我需要做什么呢？
首先，只需在页面上包含
，因为您希望在页面上显示图标。在您的代码中，您试图在
离子菜单
（您的侧菜单）中获得一个
菜单图标

因此，您将有如下内容，在
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>

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


我的自定义按钮哇

page1.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>

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


第1页FTW
//因此，此图标将根据页面在ionic堆栈中的位置而改变
打开我的菜单！

现在，在您的
app.component.ts
中，您希望将
Page1
设置为
root
，这样您将在标题中看到菜单图标

这可以通过更改
AppComponent
的
rootPage
属性轻松完成

只需
从'your/Page1/location'导入{Page1}
并调用（在构造函数f.e.
this.rootPage=Page1；

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

如果您想包含一个打开菜单的按钮，只需添加
menutogle
属性即可。
谢谢，它成功了，我需要的是setRoot方法，而不是push