Question

我不做离子，这不是我的问题，这是我的朋友的问题，因为她没有在StackOverflow上提问。我真的知道怎么问。

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

[...]这是我朋友的问题，他们害怕询问 StackOverflow因为她不知道该怎么问。

首先告诉你的朋友，她不需要害怕在StackOverflow上询问任何内容，我们都在这里学习，即使问题不对，我们会帮助她学习如何写一个好问题。

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

然后将其添加到declarations文件中NgModule的{{1}}数组中：

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

Ionic2：sidemenu子菜单（下拉列表）

1 个答案: