ionic 每个选项卡选择 3 个不同的侧边菜单

Question

从下方选择标签时，我希望有一个不同的侧边菜单。我的意思是，当我选择一个标签时，我希望我的侧边菜单发生变化。

我可以这样做吗？

谢谢 菲尔

Answer 1

一种方法是（在菜单中的每个项目上）应用一个条件类：

.hidden {
    display: none;
}

以app.html为例：

<ion-menu [content]="content">
    <!-- The side menu title -->
    <ion-header>
        <ion-navbar>
            <ion-title>{{loc.translate.MENU}}</ion-title>
        </ion-navbar>
    </ion-header>

    <ion-content>
        <ion-list>
            <!-- Show  toggle only when first tab -->
            <ion-item [class.hidden]="currentTab == firstTab" >
                <ion-toggle (ionChange)="toggled()" ></ion-toggle>
                <ion-label>Switch Wifi</ion-label>
            </ion-item>
            <!-- Show only when first tab -->
            <button [class.hidden]="currentTab == firstTab"  ion-item menuToggle>
                <ion-icon item-start name="close"></ion-icon>tab 1 says hello
            </button>
            <!-- Show only when second tab -->
            <button [class.hidden]="currentTab == secondTab" ion-item menuToggle>
                <ion-icon item-start name="close"></ion-icon>tab 2 says hello
            </button>
            <!-- Show only when third tab -->
            <button [class.hidden]="currentTab == thirdTab" ion-item menuToggle>
                <ion-icon item-start name="close"></ion-icon>tab 3 item here
            </button>
            <!-- Show always -->
            <button ion-item menuToggle>
                <ion-icon item-start name="close"></ion-icon>CLose Menu
            </button>
        </ion-list>
    </ion-content>

</ion-menu>

<ion-nav #content [root]="rootPage"></ion-nav>

在您的app.component.ts 上，您将获得当前页面（或选项卡）并将您的属性firstTab、secondTab 等定义为页面，以便您可以将其与当前页面进行比较页面。