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

时间:2019-03-11 01:56:57

标签: html angular typescript ionic4

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

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>

当我滑动并在选项卡的第一外观中显示各个字符串数组元素时,菜单aside1aside2均起作用。 问题是,当我返回上一个选项卡时,不再显示aside1 side menu,而是停止工作,而swipe手势的真正作用是显示另一个选项卡的侧面菜单。

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

1 个答案:

答案 0 :(得分:0)

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

如果有人发现为每个页面创建不同的菜单很有趣,我不会删除该问题