如何在 Ionic 3 中构建具有两级子菜单的菜单答案

【问题标题】：How to build menu with two levels of sub menu in Ionic 3如何在 Ionic 3 中构建具有两级子菜单的菜单
【发布时间】：2019-11-22 20:45:38
【问题描述】：

我有一个带有侧边菜单的 Ionic3 应用程序。我需要创建一个带有子菜单的菜单，但是在这个子菜单中我有另一个级别的列表（子菜单到子菜单）。我有这种例子，但只有一级子菜单： https://stackblitz.com/edit/multi-level-side-menu?file=app%2Fapp.component.ts

app.html

 <ion-menu [content]="content">
  <ion-header>
   <ion-toolbar  class="menu-header">
    <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>

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { TermsPage } from '../pages/terms/terms';

@Component({
 templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = HomePage;


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

  constructor(public platform: Platform, public statusBar: StatusBar, public 
     splashScreen: SplashScreen) {
this.initializeApp();

// used for an example of ngFor and navigation
this.pages = [
  { title: 'Home', component: HomePage },
  { title: 'List', component: ListPage }
];

}

initializeApp() {
this.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.
  this.statusBar.styleDefault();
  this.splashScreen.hide();
});
}

openPage(page) {
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
  this.nav.setRoot(page.component);
}
}

【问题讨论】：

标签： menu ionic3 accordion menuitem submenu

【解决方案1】：

您的数组应该是多级数组，即数组中的数组（取决于您想要多少子菜单级别），然后使用嵌套列表（列表中的列表）显示您的数组内容

例如：你的数组就像：

public appPages = [
    {
      list_header: 'Client List',
      icon: 'home',
      subList: [{
        subList_title: [

          {
            title: 'a'
          },
          {
            title: 'b'
          }
        ]

      }]
    }]

以及您在 HTML 中的列表，例如：

   <ion-list>
            <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages" text-wrap>
             <ion-item [routerDirection]="'root'" [routerLink]="[p.url]"> 
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                {{p.list_header}}
              </ion-label>
              <ion-list>
                <ion-item *ngFor="let sub of p.subList" text-wrap>
                  <ion-list>
                    <ion-item lines="none" *ngFor="let t of sub.subList_title" text-wrap>
                      {{t.title}}
                    </ion-item>
                  </ion-list>
                </ion-item>
              </ion-list>
               </ion-item> 
  </ion-menu-toggle>
   </ion-list>

【讨论】：

【解决方案2】：

@维塔利您还可以使用<ion-item-group> 标签将您的子列表分组在<ion-list> 中，这样可以避免使用嵌套的ion-list>。

 <ion-list id="sidenav" *ngFor="let p of appPages;index as i">
 <ion-item lines="full" (click)="toggleLevel1('idx'+i)" [ngClass]="{active: isLevel1Shown('idx'+i)}"
    lines="full">
 <ion-icon slot="start" [name]="p.icon"></ion-icon>
   {{p.list_header}}
 <ion-icon color="dark" slot="end" *ngIf="p.subList_title != null" [name]="isLevel1Shown('idx'+i)  ? 'arrow-dropdown' : 'arrow-dropright'">
  </ion-icon>
  </ion-item>
  <ion-item-group *ngFor="let sub of p.subList_title" submenu [class.visible]="isLevel1Shown('idx'+i)">
  <ion-item submenu-item *ngIf="isLevel1Shown('idx'+i)" lines="none">{{sub.title}}</ion-item>
  </ion-item-group>
  </ion-list>

【讨论】：