Закройте элементы подменю из элементов бокового меню при нажатии другого элемента бокового меню в Ioni c 4 - PullRequest
Новая
       9

Закройте элементы подменю из элементов бокового меню при нажатии другого элемента бокового меню в Ioni c 4

0 голосов
/ 18 июня 2020

Я добавил боковое меню с пунктами подменю в свое приложение Ioni c 4. Однако после щелчка по одному элементу бокового меню, чтобы открыть элементы подменю, элемент бокового меню не возвращается к отсутствию элементов подменю при нажатии на другой элемент бокового меню. Это означает, что одновременно может быть открыто 2 или более списка пунктов подменю, что загромождает боковое меню. Как я могу переписать код бокового меню в файле app.component. html, чтобы решить эту проблему?

Вот код бокового меню в файле app.component. html : 

<ion-content>
        <div *ngFor="let p of appPages">

          <ion-menu-toggle *ngIf="p.url">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]" routerLinkActive="active">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>

            <ion-item button *ngIf="p.children?.length > 0"
              (click)="p.open = !p.open" [class.active-parent]="p.open" detail="false">
              <ion-icon slot="start" name="arrow-forward" *ngIf="!p.open"></ion-icon>
              <ion-icon slot="start" name="arrow-down" *ngIf="p.open"></ion-icon>
              <ion-label> {{ p.title }} </ion-label>
            </ion-item>

          <ion-list *ngIf="p.open">
            <ion-menu-toggle>
              <ion-item class="sub-item" *ngFor="let sub of p.children" [routerLink]="sub.url" routerDirection="root" routerLinkActive="active">
                <ion-icon [name]="p.icon" slot="start"></ion-icon>
                <ion-label>
                  {{ sub.title }}
                </ion-label>
              </ion-item>
            </ion-menu-toggle>
          </ion-list>
        </div>
</ion-content>

Пример элемента бокового меню в массиве appPages в файле app.component.ts: 

{
      title: '1. The Growth Mindset',
      icon: 'leaf',
      children: [
        {
          title: 'TGM Intro',
          url: '/the-growth-mindset'
        },
        {
          title: 'Activity #1',
          url: '/tgm-a1'
        }
      ]
}
...