我在 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>
最佳答案
我找到的最佳解决方案。
<mat-menu #menuRef="matMenuTrigger">
<ng-template matMenuContent>
<mat-accordion *ngIf="menuRef.menuOpen">
....
</mat-accordion>
</ng-template>
</mat-menu>
在样式的情况下,折叠的 ng-animate 被破坏,bcs 高度 = 0
关于angular-material2 - 垫子菜单中垫子 Accordion 的奇怪行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48388343/