基于 Ionic 4 选项卡的应用程序中的多个侧边菜单

Posted 2023-03-13

【中文标题】基于 Ionic 4 选项卡的应用程序中的多个侧边菜单

【英文标题】：Multiple side menus in Ionic 4 tab based app

【发布时间】：2019-08-01 07:41:52

【问题描述】：

我已经使用命令创建了一个基于标签的应用程序。

ionic start myApp tabs

想法是为每个标签页添加不同的侧边菜单，尝试做一个主细节导航，使用侧边菜单作为主元素列表，标签页显示详细内容。

app.component.html 文件如下所示：

<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

tab1.page.html 点赞代码：

<ion-menu contentId="aside1" side="start">
    <ion-content>
        <ion-list>
            <ion-item class="side-menu-item" *ngFor="let item of strings">item.title</ion-item>
        </ion-list>
    </ion-content>
</ion-menu>
<ion-router-outlet id="aside1" main></ion-router-outlet>

tab2.page.html代码：

<ion-menu contentId="aside2" side="start">
    <ion-content>
        <ion-list>
            <ion-item class="side-menu-item" *ngFor="let item of strings">item.title</ion-item>
        </ion-list>
    </ion-content>
</ion-menu>
<ion-router-outlet id="aside2" main></ion-router-outlet>

aside1 和 aside2 两个菜单在我第一次看到选项卡时滑动并显示各个字符串数组元素时都有效。 问题是当我返回上一个选项卡而不是再次显示 aside1 side menu 时，这会停止工作，swipe 手势的真正作用是显示另一个选项卡的侧边菜单。

我不知道是否需要 tab1.page.ts 和 tab2.page.ts 中的特定代码才能完成这项工作。

【参考方案1】：

问题是我没有在每个侧面菜单中指定menuId。

如果有人觉得为每个页面创建不同的菜单很有趣，我不会删除问题