在Ionic 4中，当点击另一个侧菜单项时，关闭侧菜单项的子菜单项。

Question

我在Ionic 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> 

在app.component.ts文件的appPages数组中的一个侧边菜单项目的例子。

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