Ionic：侧边菜单子菜单（下拉）

Question

我不做 ionic，这不是我的问题，这是我朋友的问题，她害怕在 Whosebug 上提问，因为她真的不知道如何提问。

她只是想知道如何在 ionic 2 侧边菜单入门项目中创建子菜单。

HTML

<ion-menu [content]="content" side="left" id="menu1">
  <ion-content class="outer-content" no-border-top>
    <ion-list lines (click)="openSubCat($event,category)">
      <ion-list-header>
        Shop For
      </ion-list-header>
      <ion-item *ngFor="let item of categoryArray" let idx=index (click)="openSubCat(item.value)">
        <ion-icon [name]="item.icon" item-left></ion-icon>
          {{ item.value }}
        <ion-icon [name]="item.icon2" item-right ></ion-icon>
     </ion-item>
    </ion-list>
 </ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>`

app-components.ts

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

import { TutorialPage } from '../pages/tutorial/tutorial';


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

  rootPage: any = TutorialPage;

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

  categoryArray: Array<any> = [{
      value:'Men',
      icon: 'man',
      icon2:'ios-arrow-forward-outline',
      view:'viewToGoTo'
   },{
      value:'Woman',
      icon: 'woman',
      icon2:'ios-arrow-forward-outline',
      view:'viewToGoTo'
   },{
      value:'Kids',
      icon: '',
      icon2:'ios-arrow-forward-outline',
      view:'viewToGoTo'
   }
   ];
  constructor(public platform: Platform) {
    this.initializeApp();
  }

  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.
      StatusBar.styleDefault();
      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);
  }

openSubCat(category){
  console.log(category)

}

}

我给她发了 this link 但真的不能解释太多，因为我不做离子，但似乎要创建一个下拉列表，你只需要创建一个二维数组，是吗正确的？您能否编辑此问题中的代码以包含一个子菜单作为示例供她学习？

Answer 1

[...] it's my friend's question who's afraid of asking on Whosebug since she doesn't really know how to ask.

首先告诉你的朋友，她不需要害怕在 Whosebug 上提问，我们都是来学习的，即使问题不对，我们会帮助她学习如何写出好问题。

关于存储库（顺便说一句，感谢您分享我的演示，哈哈），这只是在 Ionic 中创建侧边菜单的一种方法。就像您在 README.md 文件中看到的那样，首先将 side-menu-content 文件夹（.ts、.html 和 .scss 文件）的内容复制到您的项目中。

然后将其添加到 NgModule 的 declarations 数组中，在 app.module.ts 文件中：

// The path could be different on your end
import { SideMenuContentComponent } from '../side-menu-content/side-menu-content.component';

@NgModule({
  declarations: [
    MyApp,
    // ...
    SideMenuContentComponent // <- Here!
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    // ...
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
})
export class AppModule { }

现在我们只需要添加一些代码来初始化侧边菜单，以及处理选择选项时要执行的操作。所以在app.component.ts文件中，添加这段代码：

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

    // Get the instance to call the public methods
    @ViewChild(SideMenuContentComponent) sideMenu: SideMenuContentComponent;

    public rootPage: any = HomePage;
    public options: Array<MenuOptionModel>;

    constructor(private platform: Platform,
                private statusBar: StatusBar,
                private splashScreen: SplashScreen,
                private menuCtrl: MenuController) {
        this.initializeApp();
    }

    initializeApp() {
        this.platform.ready().then(() => {          
            this.statusBar.styleDefault();
            this.splashScreen.hide();

            // Create the options
            this.options = this.getSideMenuOptions();
        });
    }

    // Initialize the side menu options
    private getSideMenuOptions(): Array<MenuOptionModel> {
        let menuOptions = new Array<MenuOptionModel>();

        // Shop for (header)
        //  - Man
        //  - Woman
        //  - Kids

        menuOptions.push({
            iconName: 'ios-arrow-down',
            displayName: `Shop for`,
            component: null,    // This is just the header
            isLogin: false,     // It's not the login
            isLogout: false,    // It's not the logout
            subItems: [
                {
                    iconName: 'man',
                    displayName: `Men`,
                    component: viewToGoTo,
                    isLogin: false,
                    isLogout: false
                },
                {
                    iconName: 'woman',
                    displayName: `Woman`,
                    component: viewToGoTo,
                    isLogin: false,
                    isLogout: false
                },
                {
                    iconName: 'happy',
                    displayName: `Kids`,
                    component: viewToGoTo,
                    isLogin: false,
                    isLogout: false
                }
            ]
        });

        return menuOptions;

    }

    // Redirect the user to the selected page
    public selectOption(option: MenuOptionModel): void {
        this.menuCtrl.close().then(() => {

            // Collapse all the options
            this.sideMenu.collapseAllOptions();

            // Redirect to the selected page
            this.navCtrl.push(option.component);
        });
    }

    public collapseMenuOptions(): void {
        // Collapse all the options
        this.sideMenu.collapseAllOptions();
    }
}

现在要做的最后一件事是在视图中添加侧边菜单。所以把它放在 app.html 文件中：

<ion-menu persistent="true" [content]="content" (ionClose)="collapseMenuOptions()">
    <ion-header>
        <ion-toolbar color="secondary">
            <ion-title>Menu</ion-title>
        </ion-toolbar>
    </ion-header>

    <ion-content>

        <!-- Side Menu -->
        <side-menu-content [accordionMode]="true" [options]="options" (selectOption)="selectOption($event)"></side-menu-content>

    </ion-content>
</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

Ionic：侧边菜单子菜单（下拉）

Ionic2: sidemenu submenu (dropdown)

typescript

ionic-framework

ionic2

ionic3

angular