Question

我已经安排好菜单，它有headings和sub headings。当我单击headings时，它会展开以显示subheadings，但是单击标题时它会自动隐藏。

单击headings时不应隐藏它。

下面是我的app.component.html。

    <ion-list id="inbox-list">
          <ion-list-header>Inbox</ion-list-header>
          <ion-note>hi@ionicframework.com</ion-note>

          <ion-menu-toggle *ngFor="let item of apppages_heading; let i = index" (click)="item.subhead.length > 0 ? item.expandable = !item.expandable : ''">
            <div style="width:100%">
              <div style="width:100%" (click)="item.heading == 'Dashboard' ? this.router.navigateByUrl('/dashboard') : ''">{{item.heading}}</div>
              <ion-item *ngIf="item.expandable">
                <div *ngFor="let p of item.subhead; let i = index" style="width:100%;float:left;"  (click)="callpg(i);" routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" [class.selected]="selectedIndex == i">
              <ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
              <ion-label>{{ p.title }}</ion-label>
            </div><br/>
            </ion-item>
          </div>
          </ion-menu-toggle>
        </ion-list>

       <!-- <ion-list id="labels-list">
          <ion-list-header>Labels</ion-list-header>

           <ion-item *ngFor="let label of labels" lines="none">
            <ion-icon slot="start" ios="bookmark-outline" md="bookmark-sharp"></ion-icon>
            <ion-label>{{ label }}</ion-label>
          </ion-item>
        </ion-list> -->

      </ion-content>
    </ion-menu>
    <ion-router-outlet id="main-content"></ion-router-outlet>
  </ion-split-pane>

app.component.ts代码：

 public apppages_heading = [
    {
      heading: 'Dashboard',
      url: '/dashboard',
      icon: 'paper-plane',
      subhead:[]
    },
    {
      heading: 'Heading1',
      subhead: [{
        title: 'Manage users',
        url: '/crud',
        icon: 'mail'
      },
      {
        title: 'Assign Work',
        url: '/crud2',
        icon: 'mail'
      }]
    },
    {
      heading: 'Heading2',
      subhead: [{
        title: 'Search work',
        url: '/search-todos',
        icon: 'mail'
      },
      {
        title: 'Show works',
        url: '/showworks',
        icon: 'mail'
      }]
    },
    {
      heading: 'Heading3',
      subhead: [ {
        title: 'File uploader',
        url: '/fileuploader',
        icon: 'mail'
      },
      {
        title: 'works pagination',
        url: '/workspagination',
        icon: 'mail'
      }]
    },
    {
      heading: 'Heading4',
      subhead: [ {
        title: 'Swiper',
        url: '/swiper',
        icon: 'mail'
      },
      {
        title: 'Daily report',
        url: '/dailyreport',
        icon: 'mail'
      },
      {
        title: 'View Daily Report',
        url: '/viewdailyreport',
        icon: 'mail'
      }]
    }, 
    {
      heading: 'Heading5',
      subhead: [{
        title: 'Add New Lead',
        url: '/newlead',
        icon: 'mail'
      },
      {
        title: 'View Leads',
        url: '/viewleads',
        icon: 'mail'
      }]
    }
  ];

菜单截图：

编辑

删除<ion-menu-toggle>已停止在单击heading时关闭，但是在我单击sub-heading时也已停止关闭。

点击sub heading时，它应该关闭。

<div style="width:100%" *ngFor="let item of apppages_heading; let i = index" (click)="item.subhead.length > 0 ? item.expandable = !item.expandable : ''">
      <div style="width:100%" (click)="item.heading == 'Dashboard' ? this.router.navigateByUrl('/dashboard') : ''">{{item.heading}}</div>
      <ion-item *ngIf="item.expandable">
        <div *ngFor="let p of item.subhead; let i = index" style="width:100%;float:left;"  (click)="callpg(i);" routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" [class.selected]="selectedIndex == i">
      <ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
      <ion-label>{{ p.title }}</ion-label>
    </div><br/>
    </ion-item>
  </div>

Answer 1

根据我们的讨论，这里是工作示例：

app.component.html

<div *ngFor="let item of apppages_heading; let i = index" (click)="item.subhead.length > 0 ? item.expandable = !item.expandable : ''">
        <div style="width:100%">
          <div style="width:100%" (click)="item.heading == 'Dashboard' ? this.router.navigateByUrl('/dashboard') : ''">{{item.heading}}</div>
          <ion-item *ngIf="item.expandable" (click)="toggleMenu()"> <!-- added toggle function on expanded list -->
            <div *ngFor="let p of item.subhead; let i = index" style="width:100%;float:left;"  (click)="callpg(i);" routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" [class.selected]="selectedIndex == i">
          <ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
          <ion-label>{{ p.title }}</ion-label>
        </div><br/>
        </ion-item>
      </div>
    </div>

app.component.ts

import { MenuController } from '@ionic/angular';

constructor(
    private menu: MenuController
  ) { }

toggleMenu(){ // this function will toggle your menu. 
    this.menu.toggle();
  }

侧面菜单可在单击标题时停止自动隐藏

编辑

1 个答案: