如何在ionic2的sidemenu中添加子项？

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 project.Here 我已经创建了一个带有一些项目的侧边菜单，但没有使用 tab.But 现在我需要为 sidemenu.Here 创建子项目是我的代码：如何在不使用 ionic2 中的侧边菜单内容选项卡的情况下将子项目实现到侧边菜单？

Answer 1

您可以使用 CSS 属性和 angular 条件为主菜单创建子菜单。单击主菜单时，子菜单将显示（使用 angular 条件）并带有一些填充（使用 css 属性）。 PFB 示例代码。 working version

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
    }
  }
}

如何在ionic2的sidemenu中添加子项？

How to add sub items in sidemenu in ionic2?

ionic2

angular