Question

我已经在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>

Answer 1

我找到的最佳解决方案。

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

如果使用样式，则崩溃的ng-animate会损坏，bcs高度= 0

Answer 2

这是一个已知问题，并且具有丑陋但可行的解决方案。此解决方案对我有用

<mat-expansion-panel #myPanel [class.is-expanded]="myPanel.expanded" [class.is- 
collapsed]="!myPanel.expanded">

和在CSS中：

.is-expanded { 
  .mat-expansion-panel-content { 
      visibility: inherit !important; //overwrite the element style
      height: inherit !important; //overwrite the element style
  }
}

.is-collapsed {
 .mat-expansion-panel-content {
       overflow: hidden;
      height: 0;
      visibility: hidden;
 }
}

此解决方案从这里开始 https://github.com/angular/material2/issues/10046

在席子菜单中使用mat-accordion的奇怪行为

2 个答案: