如何在ionic2的側菜單中添加子項？

Question

 rootPage: any = DashboardPage; pages: Array<{ title: string, component: any, icon: any, color: any, iconcolor: any }>; this.pages = [ { title: 'Dashboard', component: DashboardPage, icon: "md-stats", color: "", iconcolor: "primary" }, { title: 'Branches', component: BranchPage, icon: "md-home", color: "", iconcolor: "" }, { title: 'Staff', component: DoctorPage, icon: "md-medkit", color: "", iconcolor: "" }, { title: 'Patients', component: ViewrecordsPage, icon: "md-clipboard", color: "", iconcolor: "" }, { title: 'Expenses', component: AdmineexpensesPage, icon: "md-cash", color: "", iconcolor: "" }, { title: 'Appointments', component: AdmineappointmentsPage, icon: "md-list-box", color: "", iconcolor: "" }, { title: 'Transactions', component: TransactionsPage, icon: "md-swap", color: "", iconcolor: "" }, { title: 'Doctors History', component: AdmindoctorsPage, icon: "ios-medical", color: "", iconcolor: "" }, { title: 'Promotional SMS', component: PromotionalSmsPage, icon: "ios-medical", color: "", iconcolor: "" } ]; 

 <ion-split-pane when="md"> <ion-menu [content]="content"> <ion-header> <ion-toolbar> <ion-title>{{gmaildata.displayName}}</ion-title> </ion-toolbar> </ion-header> <ion-content class="no-scroll"> <ion-list> <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)" style="padding-left:5px" [style.color]="p.iconcolor === 'primary'?'#488aff':''"> <ion-icon [name]="p.icon" item-left color="{{p.iconcolor}}"></ion-icon> {{p.title}} </button> </ion-list> </ion-content> </ion-menu> <ion-nav [root]="rootPage" #content swipeBackEnabled="false" main></ion-nav> </ion-split-pane> 

我正在做ionic2項目。在這里我已經創建了一個帶有一些項的sidemenu，但沒有使用tab。但是現在我需要為sidemenu創建子項。這是我的代碼：如何在不使用side-的情況下實現sidemenu的子項ionic2中的菜單內容選項卡？

Answer 1

您可以使用CSS屬性和角度條件為主菜單創建子菜單。 在主菜單上單擊后，子菜單將顯示（使用角度條件）並帶有一些填充（使用css屬性）。 PFB示例代碼。 工作版本

app.html

<ion-menu [content]="mycontent">
  <ion-content>
    <ion-list id="sidenav">
      <ion-item (click)="menuItemHandler()">Main Menu</ion-item>
  <ion-item-group submenu [class.visible]="showSubmenu">
    <ion-item submenu-item>Sub menu item</ion-item>
    <ion-item submenu-item>Sub menu item</ion-item>
    <ion-item submenu-item>Sub menu item</ion-item>
  </ion-item-group>
    </ion-list>
  </ion-content>
</ion-menu>

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

app.component.ts

showSubmenu: boolean = false;

menuItemHandler(): void {
  this.showSubmenu = !this.showSubmenu;
}

app.scss

#sidenav {
  ion-item-group[submenu] {
    overflow: hidden;
    display: block;
    height: 0;
    transition: height .3s linear;
    padding-left: 20%;
    &.visible {
        height: inherit;
        // this is just sample value, calculate how much space you need for your menu items
    }
  }
}