Angular - 菜单未出现

Question

我正在尝试使用 Angular 和 Ionic 版本 5 实现一个简单的菜单，但是该菜单没有显示在主页面上。一个图标应该出现在屏幕的左上角，用户可以单击/点击它以显示 app.component.html 中包含的项目的下拉菜单我的代码如下

home.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title color = "light">
      EZ SWITCH FINANCE
      <ion-buttons slot = "start">
        <ion-menu-button menu="main-menu">
        </ion-menu-button>
      </ion-buttons>
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

</ion-content>

app.component.htm

<ion-app>
  <ion-menu menuId = "main-menu" contentId="main">
    <ion-header>
      <ion-toolbar>
        <ion-title>
          Menu
        </ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>

        <ion-item>
          <ion-icon name = "mail-outline" slot = "start"></ion-icon>
          <ion-label> Inbox </ion-label>
        </ion-item>

        <ion-item>
          <ion-icon name = "paper-plane-outline" slot = "start"></ion-icon>
          <ion-label> Outbox </ion-label>
        </ion-item>

        <ion-item>
          <ion-icon name = "heart-outline" slot = "start"></ion-icon>
          <ion-label> Favorites </ion-label>
        </ion-item>

        <ion-item>
          <ion-icon name="mail-outline" slot= "start"></ion-icon>
          <ion-label> Archived </ion-label>
        </ion-item>

        <ion-item>
          <ion-icon name = "trash-outline" slot = "start"></ion-icon>
          <ion-label> Trash </ion-label>
        </ion-item>

        <ion-item>
          <ion-icon name = "alert-outline" slot = "start"></ion-icon>
          <ion-label> Spam </ion-label>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>
  <ion-router-outlet id="main"></ion-router-outlet>
</ion-app>

Answer 1

尝试从“离子按钮”中摆脱“离子菜单按钮”。如果这不起作用，您始终可以使用单击事件制作自定义按钮并使用以下代码行调用方法：

    this.menu.open('theIdOfMyMenuId');