menuClose在Ionic3中无法正常工作

Posted 2021-04-21

我用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)，让我知道反馈