angular-material2 - 垫子菜单中垫子 Accordion 的奇怪行为

Question

我在 mat-menu 内构建了一个带有 mat-accordion 的页面，并且我遇到了两个问题。
首先，当我第一次打开菜单时，其中的所有 Accordion 都是打开的，即使所有的 aria-expanded 都设置为 false。单击 Accordion 后，它会正确打开，再次单击它会移动到关闭状态并返回正确的功能。
第二个问题是，如果我将所有 Accordion 都置于关闭状态，然后通过单击页面上的其他地方退出菜单，然后再次单击菜单，而菜单打开时 Accordion 正确关闭，但是当您离开时要打开其中一个 Accordion ，它不会打开 Accordion ，在它旁边会出现一个奇怪的滚动条。再次单击 Accordion 后，功能恢复正常。

这是我的菜单和 Accordion :

<button mat-button [matMenuTriggerFor]="menu" class="right-divide">
  <mat-icon>menu</mat-icon>
</button>
<mat-menu #menu="matMenu">
  <mat-accordion displayMode = "flat">
    <mat-expansion-panel>
      <mat-expansion-panel-header (click)="stopClickPropagate($event)">
        <mat-panel-title>
          PLANNING
        </mat-panel-title>
      </mat-expansion-panel-header>
      <button mat-menu-item>VIEW GOALS</button>
      <button mat-menu-item>EDIT GOALS</button>
      <button mat-menu-item>ADD A NEW GOAL</button>
      <button mat-menu-item>MAKE SCENARIO DECISIONS</button>
      <button mat-menu-item>BUILD OPTIONS</button>
    </mat-expansion-panel>
    <mat-expansion-panel>
      <mat-expansion-panel-header (click)="stopClickPropagate($event)">
        <mat-panel-title>
          BUDGET
        </mat-panel-title>
      </mat-expansion-panel-header>
      <button mat-menu-item>BASE</button>
      <button mat-menu-item>MODIFICATIONS</button>
      <button mat-menu-item>ATTRIBUTES</button>
      <button mat-menu-item>WORKFLOW</button>
    </mat-expansion-panel>
  </mat-accordion>
</mat-menu>

Answer 1

我找到的最佳解决方案。

<mat-menu #menuRef="matMenuTrigger">
 <ng-template matMenuContent>
   <mat-accordion *ngIf="menuRef.menuOpen">
              ....
  </mat-accordion>
 </ng-template>
</mat-menu>

在样式的情况下，折叠的 ng-animate 被破坏，bcs 高度 = 0