我有一个带有侧边菜单的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);
}
}
你的数组应该是多级数组,即数组中的数组(取决于你想要多少菜单子级),然后使用嵌套列表显示你的数组内容(list in list)
例如:你的数组如下:
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>
@Vitali你也可以使用<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>