时间戳

首页 > 解决方案 > 如何在 Ionic 3 中构建具有两级子菜单的菜单

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

问题描述

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

应用程序.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);
}
}

标签： menuionic3accordionmenuitemsubmenu

解决方案

@Vitali，您还可以使用<ion-item-group>标签将您的 subList 分组， <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>

推荐阅读