ionic 3根目录中的多个选项卡不起作用

Question

我想在我的离子应用程序中放置2个标签栏，一个在左边，另一个在右边。

使用CSS我将其放置在所需的位置，正确的选项卡可以正常工作。但是当我单击左侧的按钮时，它们将不起作用。

我的HTML：

    ion-tabs class="tabs-left">
    <ion-tab [root]="tab1" tabIcon="add" tabTitle="Add">
    </ion-tab>
    <ion-tab [root]="tab2" tabIcon="person" tabTitle="Profile">
    </ion-tab>
    <ion-tab [root]="tab3" tabIcon="list" tabTitle="List">
    </ion-tab>
    <ion-tab [root]="tab4" tabIcon="heart" tabTitle="Favourite">
    </ion-tab>
    </ion-tabs>

    <ion-tabs class="tabs-right">
    <ion-tab [root]="tab5" tabIcon="albums" tabTitle="Albums">
    </ion-tab>
    <ion-tab [root]="tab6" tabIcon="people" tabTitle="Friends">
    </ion-tab>
    </ion-tabs>

我的CSS：

 .tabs-left{
    .tabbar {
        top: 0;
        width: auto;
        flex-direction: column;
        position: fixed;
        visibility: visible;
        opacity: 1;
        z-index: 111;
        width: 6vw;
    }
    .tab-button {
        color: white !important;
    }
    .tab-button[aria-selected=true] {
        color: #0016dd !important;
    }
}
.tabs-right {
    .tabbar {
        top: 0;
        width: 6vw;
        flex-direction: column;
        margin-left: 94vw;
    }
    .tab-button {
        color: white !important;
    }
    .tab-button[aria-selected=true] {
        color: #0016dd !important;
    }
}
ion-tab {
    contain: none !important;
}
ion-content {
    left: 6vw;
    right: 6vw;
}

如何使两个标签栏起作用？