Angular 如何更改角度材质中sidenav（垫子抽屉）子菜单中的状态？

我对角材质中的mat drawer动画有问题。Sidenav在stay mat图标没有文本时有展开（打开的Sidenav）部分和关闭（迷你Sidenav）部分。sidenav中的主要项（父项）是没有问题的工作项。但当我想要关闭子菜单时，问题就开始了。当我打开包含项（子项）的子菜单并单击sidenav close按钮以创建迷你版本时，sidenav动画中的每个项都正确，子菜单项除外

应用程序中的图像：

你知道怎么解决这件事吗？多谢各位

源代码：

app.component.html

<mat-drawer-container class="content-container">
<mat-drawer #sidenav
            [mode]="(isHandset$ | async) ? 'over' : 'side'"
            [opened]="!(isHandset$ | async)"
            class="sidenav"
>
<app-sidebar [menuItems]="menuItems" [menuParentId]="0"></app-sidebar>
</mat-drawer>                                                                                    
   <mat-drawer-content [@onMainContentChange]="onSideNavChange ? 'open' : 'close' ">              
      <div class="main_content">
      <router-outlet></router-outlet>
  </div>
</mat-drawer-content>

<div class="sidenav-container" [@onSideNavChange]="sideNavState ? 'open' : 'close'">

  <mat-nav-list *ngFor="let menu of parentMenu">

          <a *ngIf="menu.routerLink && !menu.hasSubMenu"
             [matTooltipDisabled]="disabledTooltip"
             [matTooltip]="menu.title"
             matTooltipPosition="right"
             [routerLink]="[menu.routerLink]"
             [routerLinkActiveOptions]="{exact:true}"
             routerLinkActive="active"
             (click)="onSubMenuToggle(menu.id)"
             [id]="'menu-item-'+menu.id"
             class="nav-item nav-link"
             mat-list-item>
            <mat-icon style="padding-right:5px;">{{menu.icon}}</mat-icon>
            <span [@animateText]="linkText ? 'open' : 'close'">{{menu.title}}</span>
          </a>

          <a *ngIf="menu.hasSubMenu"
             routerLinkActive="active"
             [matTooltipDisabled]="disabledTooltip"
             [matTooltip]="menu.title"
             matTooltipPosition="right"
             (click)="onSubMenuToggle(menu.id)"
             [id]="'menu-item-'+menu.id"
             class="nav-item nav-link"
             mat-list-item>
            <mat-icon style="padding-right:5px;">{{menu.icon}}</mat-icon>
            <span [@animateText]="linkText ? 'open' : 'close'" class="menu-title">{{menu.title}}</span>
            <mat-icon class="menu-expand-icon transition-2">arrow_drop_down</mat-icon>

          </a>
          <div
            *ngIf="menu.hasSubMenu"
            class="sub-menu"
            [id]="'sub-menu-'+menu.id"
          >
            <app-sidebar [menuItems]="menuItems" [menuParentId]="menu.id"></app-sidebar>
          </div>
  </mat-nav-list>

  <div class="sidenav-bottom">
    <mat-nav-list>
      <a class="nav-item nav-link"
         mat-list-item
         (click)="onSidenavToggle()"
         *ngIf="!(isHandset$ | async)"
      >
        <mat-icon *ngIf="sideNavState">arrow_back_ios</mat-icon>
        <mat-icon *ngIf="!sideNavState">arrow_forward_ios</mat-icon>
        <span *ngIf="sideNavState" [@animateText]="linkText ? 'open' : 'close'">Close sidenav </span>
      </a>
    </mat-nav-list>
  </div>
</div>

<div class="sidenav-container" [@onSideNavChange]="sideNavState ? 'open' : 'close'">

  <mat-nav-list *ngFor="let menu of parentMenu">

          <a *ngIf="menu.routerLink && !menu.hasSubMenu"
             [matTooltipDisabled]="disabledTooltip"
             [matTooltip]="menu.title"
             matTooltipPosition="right"
             [routerLink]="[menu.routerLink]"
             [routerLinkActiveOptions]="{exact:true}"
             routerLinkActive="active"
             (click)="onSubMenuToggle(menu.id)"
             [id]="'menu-item-'+menu.id"
             class="nav-item nav-link"
             mat-list-item>
            <mat-icon style="padding-right:5px;">{{menu.icon}}</mat-icon>
            <span [@animateText]="linkText ? 'open' : 'close'">{{menu.title}}</span>
          </a>

          <a *ngIf="menu.hasSubMenu"
             routerLinkActive="active"
             [matTooltipDisabled]="disabledTooltip"
             [matTooltip]="menu.title"
             matTooltipPosition="right"
             (click)="onSubMenuToggle(menu.id)"
             [id]="'menu-item-'+menu.id"
             class="nav-item nav-link"
             mat-list-item>
            <mat-icon style="padding-right:5px;">{{menu.icon}}</mat-icon>
            <span [@animateText]="linkText ? 'open' : 'close'" class="menu-title">{{menu.title}}</span>
            <mat-icon class="menu-expand-icon transition-2">arrow_drop_down</mat-icon>

          </a>
          <div
            *ngIf="menu.hasSubMenu"
            class="sub-menu"
            [id]="'sub-menu-'+menu.id"
          >
            <app-sidebar [menuItems]="menuItems" [menuParentId]="menu.id"></app-sidebar>
          </div>
  </mat-nav-list>

  <div class="sidenav-bottom">
    <mat-nav-list>
      <a class="nav-item nav-link"
         mat-list-item
         (click)="onSidenavToggle()"
         *ngIf="!(isHandset$ | async)"
      >
        <mat-icon *ngIf="sideNavState">arrow_back_ios</mat-icon>
        <mat-icon *ngIf="!sideNavState">arrow_forward_ios</mat-icon>
        <span *ngIf="sideNavState" [@animateText]="linkText ? 'open' : 'close'">Close sidenav </span>
      </a>
    </mat-nav-list>
  </div>
</div>

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidenav.component.html',
  styleUrls: ['./sidenav.component.scss'],
  encapsulation: ViewEncapsulation.None,
  providers: [ SidebarItemsService ],
  animations: [ onSideNavChange, animateText ]
})
export class SideToolbarComponent implements OnInit {

  @Input('menuItems') menuItems;
  @Input('menuParentId') menuParentId;
  @Output() onClickMenuItem: EventEmitter<any> = new EventEmitter<any>();
  parentMenu: Array<any>;
  currentUser: User;
  public sideNavState;
  public linkText;
  public disabledTooltip;
  
  isHandset$: Observable<boolean> = this.breakpointObserver.observe(
    [Breakpoints.HandsetPortrait, Breakpoints.TabletPortrait, Breakpoints.XSmall]
  ).pipe(
    map(result => result.matches),
    tap(() => this.changeDetectorRef.detectChanges()));

  constructor(
    protected router: Router,
    private breakpointObserver: BreakpointObserver,
    private changeDetectorRef: ChangeDetectorRef,
    protected authenticationService: AuthenticationService,
    private  sidenavItemsService: SidebarItemsService,
    private sidenavService: SidebarService,

  ) {
    this.sideNavState = !this.sidenavService.isHideSidebar();
    this.linkText = !this.sidenavService.isHideSidebar();
    this.disabledTooltip = !this.sidenavService.isHideSidebar();
    this.currentUser = this.authenticationService.getCurrentLoginUser();

  }

  ngOnInit() {
    this.parentMenu = this.menuItems.filter(item => item.parentId === this.menuParentId);
  }

  onSubMenuToggle(menuId) {
    this.sidenavItemsService.toggleMenuItem(menuId);
    this.sidenavItemsService.closeOtherSubMenus(this.menuItems, menuId);
    this.onClickMenuItem.emit(menuId);
  }

  onSidenavToggle() {
    this.sideNavState = !this.sideNavState;
    this.sidenavService.setHideSidebar(!this.sidenavService.isHideSidebar());
    setTimeout(() => {
      this.linkText = this.sideNavState;
      this.disabledTooltip = this.sideNavState;
    }, 150);
    this.sidenavService.sideBarState$.next(this.sideNavState);
  }
}

import {Injectable} from '@angular/core';
import {Router} from '@angular/router';
import {Location} from '@angular/common';

import {Menu} from '../../private-app/navigations/side-toolbar/sidebar.model';
import {verticalMenuItems} from '../../private-app/navigations/side-toolbar/menu';

@Injectable()
export class SidebarItemsService {
  constructor(
    private location: Location,
    private router: Router,
  ) {

  }

  public getVerticalMenuItems(): Array<Menu> {
    return verticalMenuItems;
  }

  public expandActiveSubMenu(menu: Array<Menu>){
    const routerLink = this.location.path();
    const activeMenuItem = menu.filter(item => item.routerLink === routerLink);
    if (activeMenuItem[0]){
      let menuItem = activeMenuItem[0];
      while (menuItem.parentId !== 0){
        menuItem = menu.filter(item => item.id === menuItem.parentId)[0];
        this.toggleMenuItem(menuItem.id);
      }
    }
  }

  public toggleMenuItem(menuId){
    const menuItem = document.getElementById('menu-item-' + menuId);
    const subMenu = document.getElementById('sub-menu-' + menuId);
    if (subMenu){
      if (subMenu.classList.contains('show')){
        subMenu.classList.remove('show');
        menuItem.classList.remove('expanded');
      }
      else{
        subMenu.classList.add('show');
        menuItem.classList.add('expanded');
      }
    }
  }

  public closeOtherSubMenus(menu: Array<Menu>, menuId){
    const currentMenuItem = menu.filter(item => item.id === menuId)[0];
    if (currentMenuItem.parentId === 0 && !currentMenuItem.target){
      menu.forEach(item => {
        if (item.id !== menuId){
          const subMenu = document.getElementById('sub-menu-' + item.id);
          const menuItem = document.getElementById('menu-item-' + item.id);
          if (subMenu){
            if (subMenu.classList.contains('show')){
              subMenu.classList.remove('show');
              menuItem.classList.remove('expanded');
            }
          }
        }
      });
    }
  }
}

import { Menu } from './sidebar.model';

export const verticalMenuItems = [
    new Menu (1, 'Dashboard', '/private/', null, 'dashboard', null, false, 0),
    new Menu (2, 'Company', '/private/companies', null, 'stars', null, false, 0),
    new Menu (3, 'Users', '/private/users', null, 'group', null, false, 0),
    new Menu (4, 'Customers', '/private/api-customers', null, 'beenhere', null, false, 0),
    new Menu (5, 'Apps', '/private/applications', null, 'apps', null, false, 0),
    new Menu (6, 'Blog', '/private/articles', null, 'description', null, false, 0),
    new Menu (7, 'News', '/private/news', null, 'notifications', null, false, 0),
    new Menu (7, 'Images/Files', null, null, 'collections', null, true, 0),
    new Menu (8, 'Support', '/private/support', null, 'contact_support', null, false, 0),
    new Menu (9, 'Settings', null, null, 'settings', null, true, 0),
    new Menu (10, 'Zip', '/private/zip-files', null, 'folder', null, false, 9),
    new Menu (11, 'Files', '/private/files', null, 'data_usage', null, false, 7)
];