ionic2中离子侧菜单中的子菜单

如何在ion侧菜单中添加子菜单？我已经完成了以下代码的侧菜单

app.html

<ion-menu [content]="content">    
  <ion-header>    
    <ion-toolbar>    
      <ion-title>Menu</ion-title>    
    </ion-toolbar>    
  </ion-header>

  <ion-content>    
   <ion-list>    
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">    
        {{p.title}}    
      </button>    
    </ion-list>    
  </ion-content>    
</ion-menu>    

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

菜单
{{p.title}}

app.compact.ts

import { Component ,ViewChild} from '@angular/core';    
import { Platform ,Nav} from 'ionic-angular';    
import { StatusBar } from '@ionic-native/status-bar';    
import { SplashScreen } from '@ionic-native/splash-screen';    
import { Dashboard } from '../pages/dashboard/dashboard';    
import { LineBoy } from '../pages/line-boy/line-boy';    
import { Customer } from '../pages/customer/customer';    
import { DeliveryLine } from '../pages/delivery-line/delivery-line';    
import { Newspaper } from '../pages/newspaper/newspaper';    
import { Scheme } from '../pages/scheme/scheme';    
import { Expenses } from '../pages/expenses/expenses';    
import { Report } from '../pages/report/report';    
import { Billing } from '../pages/billing/billing';    
import { Settings }from '../pages/settings/settings';

@Component({    
  templateUrl: 'app.html'    
})    
export class MyApp {

  rootPage:any = Dashboard;

  @ViewChild(Nav) nav: Nav;

  pages: Array<{title: string, component: any}>;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });

     this.pages = [
       { title: 'Dashboard', component: Dashboard },
       { title: 'LineBoy', component: LineBoy },
       { title: 'DeliveryLine', component: DeliveryLine },
       { title: 'Customer', component: Customer },
       { title: 'Newspaper', component: Newspaper },
       { title: 'Scheme', component: Scheme },
       { title: 'Expenses', component: Expenses },
       { title: 'Report', component: Report },
       { title: 'Billing', component: Billing },
       { title: 'Settings', component: Settings },
     ];
  }

  openPage(page) {        
    this.nav.setRoot(page.component);
  }

}

从'@angular/core'导入{Component，ViewChild}；
从“离子角度”导入{Platform，Nav}；
从'@ionic native/status bar'导入{StatusBar}；
从'@ionic native/SplashScreen'导入{SplashScreen}；
从“../pages/Dashboard/Dashboard”导入{Dashboard}；
从“../pages/line boy/line boy”导入{LineBoy}；
从“../pages/Customer/Customer”导入{Customer}；
从“../pages/DeliveryLine/DeliveryLine”导入{DeliveryLine}；
从“../pages/Paper/Paper”导入{Paper}”；
从“../pages/Scheme/Scheme”导入{Scheme}；
从“../pages/Expenses/Expenses”导入{Expenses}；
从“../pages/Report/Report”导入{Report}；
从“../pages/Billing/Billing”导入{Billing}；
从“../pages/Settings/Settings”导入{Settings}；
@组件（{
templateUrl:'app.html'
})    
导出类MyApp{
rootPage:any=仪表板；
@ViewChild（导航）导航：导航；
页面：数组；
构造器（平台：平台，状态栏：状态栏，飞溅屏幕：飞溅屏幕）{
platform.ready（）。然后（（）=>{
//好了，平台准备好了，我们的插件也可以使用了。
//在这里，您可以做任何您可能需要的更高级别的本地操作。
statusBar.styleDefault（）；
splashScreen.hide（）；
});
此页=[
{title:'Dashboard'，组件：Dashboard}，
{标题：“线路男孩”，组件：线路男孩}，
{title:'DeliveryLine'，组件：DeliveryLine}，
{标题：'客户'，组件：客户}，
{标题：“报纸”，组成部分：报纸}，
{title:'Scheme'，组件：Scheme}，
{标题：“费用”，组成部分：费用}，
{标题：'报告'，组件：报告}，
{标题：'计费'，组件：计费}，
{title:'Settings'，component:Settings}，
];
}
openPage（第页）{
this.nav.setRoot（page.component）；
}
}

---

请查看@sebafereras的可能副本谢谢…..请查看@sebafereras的可能副本谢谢。。。。。