menuClose 在 Ionic3 中无法正常工作

menuClose is not working properly in Ionic3

我用 ionic3 创建了一个带有侧边菜单的应用程序。

    <ion-menu [content]="content" type="overlay" id="user-menu">
  <ion-header no-border>
    <ion-toolbar>
      <img src="assets/imgs/ic_southend_logo.png" class="width-50 margin-top-10">
    </ion-toolbar>
    <div class="user-info">
        <ion-row>
            <ion-col col-3>
                    <img src="assets/imgs/ic_avatar.png" class="user-image"> 
            </ion-col>
            <ion-col col-7>
                <div class="padding-top-10">
                        <label class="user-name"><b>USER1</b></label><br>
                        <label class="user-designation">Manager</label>
                </div>
            </ion-col>
            <ion-col col-2 text-center>
                    <img src="assets/imgs/ic_arrow_forward.png" class="arrow-forward"> 
            </ion-col>
        </ion-row>       
    </div>
  </ion-header>

  <ion-content scroll="true" scrollbar-y="true"> 
    <ion-list no-lines class="padding-top-10">
        <button ion-item menuClose  detail-none (tap)="openPageTab('ContactsPage')">
            <img class="menu-image" src="assets/imgs/ic_contact_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
            <h3 class="menu-text" [class.activeHighlight]="checkActive('ContactPage')"> Key Contacts</h3>
        </button>
        <button ion-item menuClose  detail-none (tap)="openPage('BroadcastPage')">
            <img class="menu-image" src="assets/imgs/ic_broadcast_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
            <h3 class="menu-text" [class.activeHighlight]="checkActive('BroadcastPage')"> Broadcasts</h3>
        </button>
        <button ion-item menuClose  detail-none (tap)="openPage('SettingsPage')">
            <img class="menu-image" src="assets/imgs/ic_settings_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
            <h3 class="menu-text" [class.activeHighlight]="checkActive('SettingsPage')"> Settings</h3>
        </button>
        <button ion-item menuClose  detail-none (tap)="openPage('KeyinfoPage')">
            <img class="menu-image" src="assets/imgs/ic_keyinfo_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
            <h3 class="menu-text" [class.activeHighlight]="checkActive('KeyinfoPage')"> Key info</h3>
        </button>
        <button ion-item menuClose  detail-none (tap)="openPage('FaqPage')">
            <img class="menu-image" src="assets/imgs/ic_faq_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
            <h3 class="menu-text" [class.activeHighlight]="checkActive('FaqPage')"> FAQ</h3>
        </button>

    </ion-list>
  </ion-content>
</ion-menu>

这里的问题是 menuClose 在多次单击侧边菜单后不起作用,这意味着即使在菜单上触摸后侧边菜单也没有关闭。

有解决办法吗?

编辑

使用 this.nav.push() 时出现问题 this.nav.setRoot() 没有问题 感谢和问候

阿南德

尝试使用 (click) 而不是 (tap) 并让我知道反馈