Question

我有一个带有侧面菜单的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);
}
}

Answer 1

您的数组应该是多级数组，即in数组（取决于所需的菜单子级别），然后使用嵌套列表（带有list的列表）显示数组内容

例如：您的数组就像：

public static string ConvertToString(this PartialViewResult partialView, 
                                              ControllerContext controllerContext)
    {
      using (var sw = new StringWriter())
      {
        partialView.View = ViewEngines.Engines
          .FindPartialView(controllerContext, partialView.ViewName).View;

        var vc = new ViewContext(
          controllerContext, partialView.View, partialView.ViewData, partialView.TempData, sw);
        partialView.View.Render(vc, sw);

        var partialViewString = sw.GetStringBuilder().ToString();

        return partialViewString;
      }
    }

和HTML中的列表，如：

Partial("_RodapeEmailPadrao").ConvertToString(ControllerContext)

Answer 2

@Vitali 您还可以使用Row date key status 1 2019-02-10 PS-4672 To Do 2 2019-02-10 PS-5864 To Do 3 2019-02-11 PS-4672 To Do 4 2019-02-11 PS-5864 To Do 5 2019-02-12 PS-4672 In Progress 6 2019-02-12 PS-5864 In Progress 7 2019-02-13 PS-4672 Done 8 2019-02-13 PS-5864 Done标签将您的subList分组到<ion-item-group>中，这样可以避免使用嵌套的<<ion-list>。

ion-list>

如何在Ionic 3中构建带有两个子菜单级别的菜单

2 个答案: