Боковое меню для остановки автоматического скрытия по нажатию - PullRequest
Новая
       79

Боковое меню для остановки автоматического скрытия по нажатию

1 голос
/ 04 апреля 2020

Я упорядочил свое меню, оно имеет headings и sub headings. Когда я нажимаю на headings, он расширяется, показывая subheadings, но автоматически скрывается при нажатии на заголовки.

Он не должен скрываться при нажатии headings.

Ниже my 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'
      }]
    }
  ];

Снимок экрана меню:

enter image description here

Редактировать

Удаление <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>

1 Ответ

0 голосов
/ 05 апреля 2020

Согласно нашему, здесь обсуждается рабочий пример:

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