如何在同一页上制作两个离子侧边菜单？离子

npm install -g @ionic/cli

ionic start myApp blank

cd myApp

ionic generate menu menu1
ionic generate menu menu2

import { Menu1Page } from './menu1/menu1.page';
import { Menu2Page } from './menu2/menu2.page';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(private injector: Injector) {
    const customElements = [
      createCustomElement(Menu1Page, { injector: this.injector }),
      createCustomElement(Menu2Page, { injector: this.injector })
    ];
    for (const customElement of customElements) {
      customElements.define(customElement.selector, customElement);
    }
  }
  ngDoBootstrap() {}
}

import { Menu1Page } from './menu1/menu1.page';
import { Menu2Page } from './menu2/menu2.page';

const routes: Routes = [
  { path: 'menu1', component: Menu1Page },
  { path: 'menu2', component: Menu2Page },
  { path: '', redirectTo: 'menu1', pathMatch: 'full' }
];

<ion-header>
  <ion-toolbar>
    <ion-title>
      Menu 1
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item>
      Item 1
    </ion-item>
    <ion-item>
      Item 2
    </ion-item>
    <ion-item>
      Item 3
    </ion-item>
  </ion-list>
</ion-content>

<ion-header>
  <ion-toolbar>
    <ion-title>
      Menu 2
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item>
      Item A
    </ion-item>
    <ion-item>
      Item B
    </ion-item>
    <ion-item>
      Item C
    </ion-item>
  </ion-list>
</ion-content>

<ion-app>
  <ion-split-pane>
    <ion-menu contentId="main-content">
      <ion-header>
        <ion-toolbar>
          <ion-title>
            Menu 1
          </ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
            <ion-item [routerLink]="[p.url]" routerDirection="root" lines="none">
              {{ p.title }}
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet id="main-content"></ion-router-outlet>
    <ion-menu side="end" contentId="main-content">
      <ion-header>
        <ion-toolbar>
          <ion-title>
            Menu 2
          </ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
            <ion-item [routerLink]="[p.url]" routerDirection="root" lines="none">
              {{ p.title }}
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
  </ion-split-pane>
</ion-app>

ionic serve