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

Question

我不做 ionic，这不是我的问题，这是我朋友的问题，她不敢在 StackOverflow 上问，因为她真的不知道如何问。

她只是想知道如何在 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)

}

}

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

Answer 1

关于存储库（顺便说一句，感谢分享我的演示，哈哈），这只是在 Ionic 中创建侧面菜单的一种方法。就像您在

README.md

文件中看到的那样，首先将

side-menu-content

文件夹的内容（.ts、.html 和 .scss 文件）复制到您的项目中。

然后将其添加到

declarations

的

NgModule

数组中，在

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>