angular-material2 – 在mat-menu中使用mat-accordion的奇怪行为

2019年7月28日 297次阅读

我在mat-menu中创建了一个带有mat-accordion的页面,我遇到了两个问题.

首先,当我第一次打开菜单时,其中的所有手风琴都是打开的,即使所有这些手风琴的aria-expanded都设置为false.点击手风琴后,然后正确打开,再次点击它会移动到关闭状态并返回正确的功能.

第二个问题是,如果我将所有手风琴都置于关闭状态,然后通过单击页面上的其他位置退出菜单,然后再次单击菜单,同时菜单打开,手风琴正确关闭,但是当你走打开手风琴之一它不打开手风琴,旁边有一个奇怪的滚动条.再次,在第二次单击手风琴后,功能恢复正常.

这是我的菜单和手风琴：

<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>

最佳答案 我找到的最佳解决方案.

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

在样式的情况下,崩溃的ng-animate被破坏,bcs height = 0

点赞